Webpack和Babel未在node_模块内传输依赖项，该模块因ES6'而破坏IE 11和Edge；s扩展语法

我有一个使用

@mdx js/runtime

的项目，它在IE 11或Edge上完全崩溃（

Edge 44.18362.449.0

）：

由于此处的扩展语法，它实际上会中断：

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

这行代码来自

备注mdx

，它是

@mdx js/runtime

的依赖项，尤其是此文件和行：

我一直在尝试让Webpack和Babel转换该文件，以使传播不再存在：

浏览器列表：

如果我运行

npx浏览器列表

我可以看到IE 11在那里

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

.babelrc:

我尝试禁用

loose

模式并添加

@babel/plugin transform spread

和

@babel/plugin提案对象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:

在这里，我尝试明确地包括

备注mdx

和

@mdx js/runtime

，并删除

排除

属性或将其更改为

/node\u modules\/（？！（备注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作为一个网页包4。

好的，结果是要处理

node\u模块中的文件

您需要使用

Babel.config.js

而不是

。babelrc

，如前所述：

您的用例是什么？

• 您使用的是monorepo
• 是否要编译节点_模块

  babel.config.json

  是给你的

• 您的配置仅适用于项目的单个部分

  .babelrc.json

  是给你的

此外，如果您使用的是monorepo，则需要进行设置，以便Babel可以找到新的配置文件，如前所述

网页包的

babel加载程序

config应该如下所示：

  {
    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',
      }
    }],
  }

{
    "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"
    }]
}

更改后，文件正在处理中，但我遇到了另一个错误：

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

{
    "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"
    }]
}