有關 npm 包的本地開發和調試

前言

接上一篇 利用AST自動爲函數增長錯誤上報咱們開發了一個 Babel plugin（npm 包）， 本文咱們繼續探討下如何在本地開發和調試 npm 包。

當 npm 包還在開發階段不可能一邊發佈一邊調試，否則也太繁瑣了。不一樣場景下調試方法有不少，好比如今 npm 包中利用 node 直接運行調試，或者直接在工程的 node_modules 中將引用修改後直接修改源碼調試。本文我將介紹其中一種，也是我最經常使用的一種。

npm link

進入本地的 babel-plugin-function-try-catch 這個 npm 包 的根目錄執行：

npm link

上面的命令能夠將當前的這個包安裝在全局（mac 中的路徑是 /usr/local/bin），也就是 npm i -g 安裝包的目錄。

執行後結果如圖：

這樣在本地的 global 下就會存在一個這樣的 npm 包。

因爲這是經過軟連接的方式實現的，當咱們編輯了本地的 babel-plugin-function-try-catch 模塊中的代碼，能夠直接在安裝它的工程中立刻看到更新後的效果。

項目中安裝本地 npm 包

接下來，咱們（隨便）找一個業務工程去安裝這個 npm 包，本文默認使用這個工程能夠點擊去下載。
在工程根目錄執行:

npm link babel-plugin-function-try-catch

上面這一步就是讓當前工程去模擬 npm install 命令，包來源於本地 npm link 過的文件。

執行後，業務工程的 node_modules 中就會有這個包。

眼尖的小夥伴會發現，這個 npm 包不一樣於其它包，它帶有一個轉折箭頭符號。以下圖所示：

也就是說這是一個軟連接，執行 npm link xxx 後它會在系統中作一個快捷方式映射。因此這樣方便咱們不斷調試本地正在開發的這個 npm 包。

本地項目工程配置這個 loader

打開當前項目的 webpack 配置文件：
webpack.config.js

rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
+       "babel-plugin-function-try-catch",
          "babel-loader"
      ]
    },
]

執行 npm start 啓動當前前端工程。能夠看到原來的代碼

var fn = function(){
  console.log(11);
}
fn();

在瀏覽器中自動會加上 try/catch，錯誤發生時能夠自動捕獲和上報。

至此，完成了本地 npm 包和本地業務工程的關聯！

本地調試 npm 代碼

此時我要修改 catch 中的代碼，將其改成 console.log(error)，這個時候你只須要修改本地 npm 工程中的代碼便可：

// src/index.js

- var catchStatement = template.statement(`ErrorCapture(error)`)();
+ var catchStatement = template.statement(`console.log(error)`)();

而後執行：

npm run build

再切到業務工程從新啓動項目 npm start 便可生效。

當本地 npm 包調試完成後，在其根目錄執行：

npm unlink babel-plugin-function-try-catch

便可解除 link。

若是要發佈到 npm 公網，執行 npm publish 便可。

就到這裏，再見吧。