"Babel 不會從 'node_modules' 轉譯導入的模塊"

Question

我從node_modules<\/code>轉譯導入的模塊時遇到問題。 由於某種原因，Babel 不會轉譯從node_modules<\/code>導入的模塊，而是轉譯從src<\/code>導入的模塊。

這是一個示例倉庫： https<\/a> :\/\/github.com\/NikitaKA\/babeltest

main.js<\/strong>

// result code contains const and let, but it shouldn't. :(

Answer 1

擴展我的意見：

你真的不想轉發所有的node_modules - 它需要很長時間，而且那里的大部分代碼應該已經是ES5（除非它們實際上是ES6模塊，在這種情況下，ES6入口點被宣布為"module"在package.json清單中”。

query-string@6.x 不是 ，它在自述文件中這樣說：

該模塊面向Node.js 6或更高版本以及最新版本的Chrome，Firefox和Safari。 如果要支持舊版瀏覽器，請使用版本5： npm install query-string@5 。

Answer 2

在這種情況下的解決方案是再次轉換模塊，這可以通過修改webpack配置中的exclude屬性來完成：

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(es6-module|another-es6-module)\/).*/,
},

es6-module將不再忽略模塊es6-module和another-es6-module ，並將使用其余的源代碼進行轉換。

請參閱webpack項目中的GitHub問題 。

經webpack@3.12.0 ， babel-core@6.26.3 babel-core@6.26.3 webpack@3.12.0 babel-core@6.26.3和babel-core@6.26.3測試

Answer 3

如果你使用 Vue，有一個簡單的解決方案。 只需在transpileDependencies<\/code>中列出您的模塊：

vue.config.js<\/strong>

module.exports = {
   publicPath: '',
   outputDir: 'www',
   transpileDependencies: [
    'query-string'
  ],
}