【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】測試流程