前端構建踩坑 --- 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的除外）