【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: CookieStorage
  }
}复制代码

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

最后须要发布 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】测试流程