Webpack和Babel没有转译node_modules内的一个依赖项，导致ES6的展开语法在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转换该文件，以便不再使用spread。 Browserlist: 如果运行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。

- Danziger

Answer 1

好的，事实证明要处理node_modules中的文件，您需要使用babel.config.js而不是.babelrc，如这里和这里所解释的那样：

你的用例是什么？

• 您正在使用单库存储库？

• 您想编译node_modules吗？

  babel.config.json适合您！

• 您有一个仅适用于项目某个部分的配置吗？

  .babelrc.json适合您！

此外，如果您正在使用单库存储库，则需要设置rootMode：'upward'，以便Babel可以找到您的新配置文件，如这里所解释的那样。

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>'

在这种情况下，我不得不在babel.config.json中添加sourceType: "unambiguous"，因为remark-mdx使用的是CommonJS模块而不是ES6模块。您可以将其添加到babel.config.json文件的根目录或overrides内部，以便它仅针对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"
    }]
}

- Danziger