Babel 沒有將導入的 node_modules 轉譯為 ES5 - 包括 ES2015 語法

Question

我的 babel+webpack 配置工作正常，但生成的包不能在 IE11 中運行，因為它包含const聲明。 我認為擁有es2015預設足以解決這個問題？ 運行$(npm bin)/babel test/some-es2015.js會生成嚴格的 ES5.1 代碼，所以 Babel 似乎可以工作，但 IE11 中的實際代碼是在從node_modules導入的模塊中。

當在我的結果包中 grepping 'const ' ，我得到了這樣的某些行（eval 是由於 eval 源映射 btw）：

eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst validator = __webpack_require__(/*! validator */ \"./node_modules/tcomb-additional-types/node_modules/validator/index.js\");\nconst t = __webpack_require__(/*! tcomb */ \"./node_modules/tcomb/index.js\");\nconst IP = t.refinement(t.String, validator.isIP);\nexports.IP = IP;\nexports.default = IP;\n//# sourceMappingURL=ip.js.map\n\n//# sourceURL=webpack:///./node_modules/tcomb-additional-types/lib/string/ip.js?");

需要注意的重要部分是諸如const validator =類的東西。 這不是 ES5.1 語法。 我自己的代碼似乎已經很好地轉換為 ES5。 我可以在/node_modules/tcomb-additional-types/lib/string/ip.js看到這個文件，在那里他們使用const ，所以這不是 Babel 添加const s，而是包含它們的源代碼。 大多數其他軟件包都是 ES5。

到目前為止，我發現大多數const來自material-ui和tcomb-additional-types 。

巴別塔.babelrc：

{
    "compact": false,
    "presets": [
        "es2015",
        "es2017"
    ],
    "plugins": [
        ["transform-runtime", {
            "polyfill": false,
            "regenerator": true
        }],
        "transform-class-properties",
        "transform-react-jsx",
        "transform-object-rest-spread"
    ]
}

網絡包配置：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

/** @returns {String} an absolute path */
function toRoot(rootRelativeDir) {
  return path.resolve(__dirname, '..', rootRelativeDir);
}

module.exports = {
  entry: ['./src/app.js', './styles/flex.less'].map(toRoot),
  output: {
    filename: 'bundle.js',
    path: toRoot('.webpack/dist')
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {}
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              /* General options are read using .babelrc - only webpack loader specific here */
              cacheDirectory: toRoot('.webpack/babel_cache')
            }
          }
        ]
      }
    ]
  },
  plugins: [new CopyWebpackPlugin([toRoot('public')])]
};

Answer 1

我有一個類似的問題，我通過重命名固定它.babelrc.js到babel.config.js 。

顯然， .babelrc作用域比babel.config.js小，如果你想了解更多相關信息，請查看這篇文章：

何時使用 babel.config.js 和 .babelrc

Answer 2

我的根本問題是某些Node軟件包未使用ES5語法編寫，並且Babel轉換由於某種原因未對它們進行轉換。 這是正常問題

找到為什么會這樣很容易（@Vincent的回答很有幫助）； 我在配置中exclude: /node_modules/ 。 當然，刪除此選項將“解決”該問題，但是它將引入新的問題，因為存在exclude是有原因的，因為您不希望Babel處理其中的每個文件。

因此，您想要的是： 允許某些模塊的選擇性過濾 。

試圖構造一個正則表達式將允許在node_modules下有一個軟件包列表，但是限制其余部分是麻煩且容易出錯的。 幸運的是， Webpack文檔描述了可以exclude的條件規則之一。

• 字符串：要匹配輸入，必須以提供的字符串開頭。 即 絕對目錄路徑或文件的絕對路徑。
• RegExp：已使用輸入進行了測試。
• 一個函數：使用輸入調用它，並且必須返回真實值以進行匹配。
• 條件數組：至少一個條件必須匹配。
• 對象：所有屬性必須匹配。 每個屬性都有定義的行為。

創建這樣的功能很容易！ 因此，我沒有exclude: /node_modules更改為exclude: excludeCondition ，其中excludeCondition是以下函數：

function excludeCondition(path){

  const nonEs5SyntaxPackages = [
    'material-ui',
    'tcomb-additional-types'
  ]

  // DO transpile these packages
  if (nonEs5SyntaxPackages.some( pkg => path.match(pkg))) {
    return false;
  }

  // Ignore all other modules that are in node_modules
  if (path.match(toRoot("node_modules"))) { return true; }

  else return false;
}

這解決了我的問題，因為只有極少數的包使用ES2015語法，因此將它們添加到白名單是可管理的。

Answer 3

我也遇到了同樣的問題。 某些節點模塊不提供瀏覽器支持，而目標節點版本則利用較新的ES語法。

我遇到了一個方便的軟件包，該軟件包可以轉換節點模塊代碼：

https://www.npmjs.com/package/babel-engine-plugin

它解決了我有關IE11支持的問題，希望對您有所幫助