前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >npm publish package 开发错误集合

npm publish package 开发错误集合

原创
作者头像
林小帅
修改2020-04-09 10:02:44
1.2K0
修改2020-04-09 10:02:44
举报
文章被收录于专栏:林小帅的专栏

这是【npm publish package】的最后一篇文章,总结了开发时需要注意的要点还有目前我自己遇到的错误集合。

没有长篇大论,全是解决问题的关键点,便于快速找到问题点以及解决方案。

01 - npm link

前提是需要另一个项目来配合使用,link 可以完全模拟 install 完成后的情况。

PROJECT

├─ cat-web-storage (需要发布的项目)

└─ testModules (用于测试的项目)

代码语言:javascript
复制
cd PROJECT\cat-web-storage
npm link

这一步是在 NodeJs\node_global\node_modules 中生成 link package。

代码语言:javascript
复制
cd PROJECT\testModules
npm link cat-web-storage

这一步是将 PROJECT\cat-web-storage link 到 当前项目中。

link 和 指向关系
link 和 指向关系

最终的结果就是 testModules 的 node_modules 直接指向 cat-web-storage 源码。这样就能直接减少频繁的 build 需要开发的项目,省时省力!!!

02 - package.js

想要能够直接进行 console.log、debugger或者断点调试就需要修改 cat-web-storage 项目中的 package.js 配置。

开发阶段:

修改配置如下,main、module 入口应该都是指向源码文件而非 build 后的代码文件。

代码语言:javascript
复制
{
  "main": "src/index.ts",
  "module": "src/index.ts"
}

确认需要发布:

这里就注意需要修改成 build 后的文件作为入口,切记!切记!切记!!!

代码语言:javascript
复制
{
  "main": "dist/web-storage.common.js",
  "module": "dist/web-storage.esm.js"
}

03 - resolve.symlinks

首先需要配置 resolve.symlinks ,配置以后 webpack 会将 cat-web-storage 源码进行编译。

代码语言:javascript
复制
chainWebpack: config => {
  config.resolve.symlinks(false);
}

以上就是在开发阶段需要修改的地方。重要!!!

04 - 找不到依赖项错误

如果出现以下错误,请先检查 testModules 是否已经正确 link 了 cat-web-storage 的源码!

代码语言:javascript
复制
This dependency was not found:
* cat-web-storage in ./src/main.ts
To install it, you can run: npm install --save cat-web-storage
Type checking and linting in progress...

05 - 未找到ESLint配置错误

如果出现以下错误,请先检查是否已经将 resolve.symlinks 配置到 testModules 项目中!

代码语言:javascript
复制
ERROR  Failed to compile with 1 errors
  Module build failed (from ./node_modules/eslint-loader/index.js):
  Error: No ESLint configuration found in PROJECT\cat-web-storage\dist.

06 - 不存在属性警告错误

如果使用的是 TypeScript 来开发就需要注意一下,testModules 启动正常,但是控制台提示警告错误,但页面运行正常

常见如下:

代码语言:javascript
复制
Property '$localStorage' does not exist on type 'WebStorage'.

this.$localStorage.set('number', 10086); // 情况一
     ^
vm.$localStorage.set('number', 10086); // 情况二
   ^
window.$localStorage.set('number', 10086); // 情况三
       ^

此警告错误是因为缺少类型描述文件,即 *.d.ts 文件。在 testModules 项目中 src 下新建任意 *.d.ts 文件。

添加如下信息:

代码语言:javascript
复制
// 导入你的项目
import {
  LocalStorage,
  SessionStorage,
  CookieStorage
} from 'cat-web-storage';
// 将导出的接口描述类型,以接口的方式声明至 vue type 描述文件中
// 'vue/types/vue' vue 类型描述文件路径
declare module 'vue/types/vue' {
  interface Vue {
    $localStorage: LocalStorage
    $sessionStorage: SessionStorage
    $cookieStorage: CookieStorag
  }
}

添加完成后重启项目即可解决。

最后需要发布 publish package 的时候别忘记了将 npm 源切换至 npmjs 不然登录的时候会报错噢 。

阿里云的 npm 镜像 cnpm 会每10分钟进行一次同步。

最后

我在尝试编写一个 npm publish package 的时候还是较为顺利的。开始的时候也是看了点资料闷头就写。主要有两个地方消耗的时间是比较多的。

使用 rollup + TypeScript 的最大的问题就是网上的资料较少且较为古老,部分所使用的包已经不再维护了,后来是自己是按照同名包寻找 rollup 的 TypeScript 版本才最终确定哪些包是可以使用的。

未找到 ESLint 配置错误,在这里也是花费了一些时间,主要是第一次遇到的时候报出了 ESLint 的错误,先入为主看着错误的字面意思我就是以为没有引入 ESLint 包,后来又引入了 ESLint 以及配置了规则,但最终结果还是启动失败的。后来我就想着,我两个项目(发布项目和测试项目)都是用的 TypeScript 为什么会和 ESLint 有关系?逐换了好几茬关键字搜索,终于找到有和我类似问题的文章,其中就提到 resolve.symlinks 这个关键信息。

最后的最后那就祝各位小伙伴

代码力Max!

生产力爆棚!

朝九晚五不加班!

相关文章

版权声明:

本文版权属于作者 林小帅,未经授权不得转载及二次修改。

转载或合作请在后台留言及联系方式。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 01 - npm link
  • 02 - package.js
  • 03 - resolve.symlinks
  • 04 - 找不到依赖项错误
  • 05 - 未找到ESLint配置错误
  • 06 - 不存在属性警告错误
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档