由於 ES6 的擴展語法，Webpack 和 Babel 沒有在 node_modules 內轉譯破壞 IE 11 和 Edge 的依賴項

Question

我有一個使用@mdx-js/runtime的項目，它在 IE 11 或 Edge（ Edge 44.18362.449.0 ）上完全中斷：

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

由於這里的傳播語法，它實際上中斷了：

const allNodes = sortedNodes.map(({ start: _, ...node }, i) => { 

這行代碼來自remark-mdx ，它是@mdx-js/runtime的依賴項，特別是這個文件和行： https : //github.com/mdx-js/mdx/blob/master/packages/remark- mdx/extract-imports-and-exports.js#L66

我一直在嘗試讓 Webpack 和 Babel 轉換該文件，以便不再存在傳播：

瀏覽器列表：

如果我運行npx browserslist我可以看到 IE 11 在那里。

"browserslist": [
    "> 0.5%",
    "last 2 version",
    "Firefox ESR",
    "not dead",
    "iOS >= 9"
]

.babelrc：

我嘗試禁用loose模式並添加@babel/plugin-transform-spread和@babel/plugin-proposal-object-rest-spread ，但沒有解決問題。

  {
    "presets": [[
        "@babel/preset-env", {
            "useBuiltIns": "usage",
            "loose": false, // Was true before
            "modules": "auto",
            "corejs": 3
        }],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],

    "plugins": [
        ["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        ["@babel/plugin-proposal-class-properties", {
            "loose": true
        }],
        "@babel/plugin-transform-spread", // Just added
        "@babel/plugin-proposal-object-rest-spread", // Just added
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "react-hot-loader/babel"
    ]
}

webpack.config.js:

在這里，我嘗試明確包含remark-mdx和@mdx-js/runtime並刪除exclude屬性或將其更改為/node_modules\\/(?!(remark-mdx|@mdx-js\\/runtime)\\/).*/ ，但似乎沒有任何效果：

  {
    test: /\.(j|t)sx?$/,
    include: [
      path.resolve(__dirname, 'src'),
      // Tried explicitly adding these 2:
      path.resolve('node_modules/remark-mdx'),
      path.resolve('node_modules/@mdx-js/runtime'),
    ],
    // Tried removing `exclude` or not excluding those 2 packages:
    // exclude: /node_modules/,
    // exclude: /node_modules\/(?!(remark-mdx|@mdx-js\/runtime)\/).*/,
    use: [{
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        babelrc: true,
      }
    }],
  }

我正在使用 Babel 7 和 Webpack 4。

Answer 1

好的，事實證明處理node_modules內的文件你需要使用babel.config.js而不是.babelrc解釋here和here ：

你的用例是什么？

• 您正在使用 monorepo 嗎？

• 你想編譯 node_modules 嗎？

  babel.config.json適合你！

• 您的配置僅適用於項目的一個部分？

  .babelrc.json適合你！

此外，如果您使用的是monorepo你需要設置rootMode: 'upward'讓巴貝爾可以找到新的配置文件，如解釋在這里。

Webpack 的babel-loader配置應該是這樣的：

  {
    test: /\.(j|t)sx?$/,
    include: [
      path.resolve(__dirname, 'src'),
      // No need to add @mdx-js/runtime, just add the problematic package:
      path.resolve('node_modules/remark-mdx'),
    ],
    // You also need to exclude it from the exclusions:
    exclude: /node_modules\/(?!(remark-mdx)\/).*/,
    use: [{
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        // And replace .babelrc with babel.config.json...
        babelrc: false,
        // ...which might also mean you need this if you are using a monorepo:
        rootMode: 'upward',
      }
    }],
  }

在此更改之后，正在處理文件，但我收到了不同的錯誤：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

在這種情況下，我必須將sourceType: "unambiguous"添加到babel.config.json ，因為remark-mdx使用的是 CommonJS 模塊而不是 ES6 模塊。 您可以在babel.config.json文件的根目錄或overrides內部node_modules它，以便它僅針對node_modules包。

有關為什么會發生這種情況的更多信息，請參閱如何在供應商捆綁包上使用 babel 的 `useBuiltIns: 'usage'` 選項？ .

Babel 的babel.config.json最終看起來像這樣：

{
    "presets": [[
        "@babel/preset-env", {
            "useBuiltIns": "usage",
            "loose": true,
            "modules": "auto",
            "corejs": 3
        }],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],

    "plugins": [
        ["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        ["@babel/plugin-proposal-class-properties", {
            "loose": true
        }],
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "react-hot-loader/babel"
    ],

    "overrides": [{
        "test": "./node_modules",
        "sourceType": "unambiguous"
    }]
}