前端構建踩坑 --- babel-loader 對已編譯的腳本進行再編譯從而導致文件執行出錯

前言

本人博客原地址：前端構建踩坑 — babel-loader 對已編譯的腳本進行再編譯從而導致文件執行出錯

問題描述： babel-loader 對已編譯的腳本進行再編譯從而導致文件執行出錯。

  因爲打算開發一個小組件庫，但是要對已經編譯完成的組件庫的腳本進行一遍完整的測試。所以，本人就很自然的啓動一個項目，引入已經編譯好的組件庫腳本，想着大展伸手，結果。。。

  遇到了一大堆腦瓜子疼的警告"export 'default' (imported as 'a') was not found in 'xxx' "，或亂七八糟的報錯…（捂臉哭.jpeg）。

• 原本我要引入的腳本a.umd.js是使用了ES6 模塊的寫法，將對應的模塊export default 出來的。
• 再將組件庫發包到 npm上，並通過npm install 去將該組件庫安裝到node_modules對應的目錄中。
• 然後使用import a from 'XXX’去引入，結果這個組件庫是可以正常使用的。
• 但是，當直接在本地(不是在node_modules)引入該腳本或在直接在package.json中將該組件庫作爲本底依賴安裝也不行時，就會出現上面提示的警告（或報錯）。

  原本想着只有在node_modules中才能正常使用，好，爲了調試，我選擇直接將該腳本（a.umd.js）作爲本地依賴引入，因此，我就很興奮去嘗試了。。。步驟是這樣的：

// 在package.json直接通過通過本地依賴的方式引入腳本a.umd.js
{
  "name": "baz",
  "dependencies": {
    "a": "file:./config/a.umd.js"
  }
}

嗯，很順利npm i完成，然鵝。

直接通過本地依賴的方式依舊存在以上的問題。

那麼爲什麼通過npm i發佈到 npm 的腳本a.umd.js能在 node_modules 正常使用而通過本地依賴的方式安裝 node_modules 以及直接引用卻不行？

後來

經過網上查資料以及分析項目，終於發現了這麼一個事情。。。

  嗯，是的，babel-loader 對a.umd.js這個腳本，再次進行了編譯。。。導致原本編譯好的可以正常使用的腳本再次進一步被編譯了，所以纔會報錯"export 'default' (imported as 'a') was not found in 'xxx' "。

因此

  爲了能順利地在本地調試組件庫的腳本a.umd.js，我只能選擇在引入該腳本 a.umd.js調試的項目中進行 babel-loader 的配置，將 babel-loader 對 a.umd.js 的編譯進行exclude。即babel-loader 不編譯名字中包含a.umd字符的文件。

• 如果直接使用webpack配置，則配置如下：

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /a.umd/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

• 如果是使用vue-cli，則vue.config.js配置如下：

chainWebpack: (config, isServer) => {
// config 是 ChainableConfig 的一個實例    
config.module.rule('js').use('babel-loader')
.loader('babel-loader').tap(options => {
    options.exclude = /a.umd/
    // 修改它的選項...
    return options
  })
},

從過以上的方式就可以避免babel-loader 對已經編譯的文件進行二次編譯

所以，綜上所述

• vue-cli3 中 babel-loader 的配置是不對 node_moudules 文件夾中的文件進行編譯，所以當直接將腳本放在 node_modules 或直接通過 npm 遠程 install 都能正常使用。
• 而當引入的腳本不在 node_modules 中或通過本地依賴的方式安裝到 node_modules 都會被babel-loader二次編譯（當然設置了exclude的除外）