npm publish package 开发错误集合

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

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

01 - npm link

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

PROJECT

├─ cat-web-storage （需要发布的项目）

└─ testModules （用于测试的项目）

cd PROJECT\cat-web-storage
npm link

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

cd PROJECT\testModules
npm link cat-web-storage

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

link 和 指向关系

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

02 - package.js

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

开发阶段：

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

{
  "main": "src/index.ts",
  "module": "src/index.ts"
}

确认需要发布：

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

{
  "main": "dist/web-storage.common.js",
  "module": "dist/web-storage.esm.js"
}

03 - resolve.symlinks

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

chainWebpack: config => {
  config.resolve.symlinks(false);
}

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

04 - 找不到依赖项错误

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

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 项目中！

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 启动正常，但是控制台提示警告错误，但页面运行正常。

常见如下：

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 文件。

添加如下信息：

// 导入你的项目
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！

生产力爆棚！

朝九晚五不加班！

相关文章

• 【npm publish package】 发布流程
• 【npm publish package】 测试流程

版权声明：

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

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