仅包含所需的 Node_modules 的 babel 转译

Question

我有以下配置让 nextjs 处理 IE11 的 ES6 代码。

 module.exports = {
  poweredByHeader: false,
  distDir: "ssr_build",
  webpack(config) {
    config.node = { fs: "empty", net: "empty", tls: "empty" }
    config.plugins = config.plugins || []
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [
            [
              "next/babel",
              {
                targets: { ie: 11 },
              },
            ],
          ],
        },
      },
    })
    return config
  },
}

我想知道我是否可以有条件仅在 ES6 时转译 node_modules 模块，而不是花时间转译**所有内容。救命！**

Update1.0：

我已经找到了需要 ES6 转换的 ES5 依赖项：https://github.com/obahareth/are-you-es5，为排除创建了一个正则表达式，但没有用。我会再试一次，看看是否缺少子子依赖关系。

我已经尝试过 - https://github.com/martpie/next-transpile-modules，不幸的是它需要手动插入所有 node_modules。这似乎是一个乏味的过程，并停止了它。

Answer 1

我看到你有两个选择：

选项 1（更好的选项） - 调查您的依赖关系。大多数依赖项在其构建阶段将自己转换为 ES5，然后就可以了。您可以（通常）查看他们的 dist 文件夹，或者只查看文档或问题。

如果您发现有一些依赖项可以转译为 ES6，您可以使用以下 next.js 插件有选择地仅转译这些依赖项： https://github.com/martpie/next-transpile-modules

选项 2 - 如果您不知道哪些 node_modules 实际包含 ES6 代码，并且您不想花时间弄清楚您的项目依赖关系：

使用如下配置文件配置@babel/preset-env，仍然扫描所有节点模块。此加载器应仅根据您的目标环境转译需要转译的代码部分。

{
  "targets": {
    "ie": "11"
  }
}