使用 Babel 7 转译代码以用于 Node12/Babel6 应用

Question

我正在创建一个包，它将使用 renderToStaticMarkup 将一些 React 组件（准确地说是 MDX）渲染成一个字符串。我正在使用 Webpack + Babel 7 来转换它。

现在我需要能够从遗留 Node12/Babel6 应用程序中使用此代码。当我尝试这样做时出现此错误：

Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

我不明白为什么会这样。我的包不应该需要任何 babel 运行时，它有 import/export+async/await，所有这些都应该在不需要任何运行时的情况下转换为 Node12。

webpack.config.js:

const path = require('path')

module.exports = {
  mode: 'production',
  target: 'node',
  entry: ['./src/index.ts'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    library: {
      type: 'commonjs2',
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: '@mdx-js/loader',
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
}

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "12"
        },
        "useBuiltIns": false
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ]
}

Answer 1

您的 Babel 6 应用程序可能通过 Babel 传递您的依赖项。

编译文件时，Babel 6 的默认行为是加载最近的 .babelrc 文件并使用它（这在 Babel 7 中已更改 - https://babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading）：您的 Babel 6 实例是读取 Babel 7 使用的 .babelrc 文件，尝试加载 Babel 7 插件并抛出。

一种可能的解决方法是将 .babelrc 重命名为 .babelrc.json：Babel 6 不支持它，因此它将被忽略。

如果我们谈论的是已发布的软件包，一个正确的解决方案是将 .babelrc 添加到您的 .npmignore 文件：这样做它不会出现在您的 node_modules, 所以不会被 Babel 6 意外加载.

使用 Babel 7 转译代码以用于 Node12/Babel6 应用

Transpile code with Babel 7 to be used in a Node12/Babel6 app

webpack

babeljs

babel-loader