强制 Babel 将 import 转换为 require？答案

【问题标题】：Force Babel to transform import into require?强制 Babel 将 import 转换为 require？
【发布时间】：2021-02-08 04:27:03
【问题描述】：

在我从节点 12 升级到节点 14 后，Babel 停止将 import 转换为 require。这是我的 Babel 配置：

export default {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: '3',
      modules: false,
      targets: {
        node: 12,
      },
    }],
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining',
  ],
  sourceType: 'unambiguous',
  overrides: [
    {
      test: ['./web'],
      presets: [
        ['@babel/preset-env', {
          useBuiltIns: 'usage',
          corejs: '3',
        }],
      ],
      plugins: [
        '@babel/plugin-transform-react-jsx',
        ['module-resolver', {
          root: ['./shared', './web'],
          extensions: ['.js', '.jsx', '.ts', '.tsx'],
        }],
      ],
      env: {
        production: {
          plugins: ['transform-react-remove-prop-types'],
        },
      },
    },
    {
      test: ['./server'],
      plugins: [
        ['module-resolver', {
          root: ['./shared', './server'],
          extensions: ['.js', '.jsx', '.ts', '.tsx'],
        }],
      ],
    },
    {
      test: ['./shared'],
      plugins: [
        ['module-resolver', {
          root: ['./shared'],
          extensions: ['.js', '.jsx', '.ts', '.tsx'],
        }],
      ],
    },
  ],
};

如何让 Babel 转换 import？

【问题讨论】：

你试过targets: { node: 14 }吗？
我添加了 node: 12 因为 Node 13 添加了原生 import 支持。顺便说一句，这不起作用

标签： javascript babeljs

【解决方案1】：

您应该将@babel/preset-env 的modules 选项设置为'cjs'，以便它将您的模块转换为CommonJS（使用require）。 false 的值告诉 Babel 不要执行模块转换。

Babel's docs:

“AMD” | “嗯” | “系统” | “普通” | "cjs" | “汽车” | false，默认为“自动”。

启用将 ES 模块语法转换为另一种模块类型。注意，cjs 只是 commonjs 的别名。

将此设置为 false 将保留 ES 模块。仅当您打算将本机 ES 模块发送到浏览器时才使用此选项。如果你使用 Babel 打包器，默认模块：“auto”总是首选。

【讨论】：