时间戳

首页 > 解决方案 > 为什么在这种情况下 babel 会转换 import 和 export？

javascript - 为什么在这种情况下 babel 会转换 import 和 export？

问题描述

我有这个babel.config.js：

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
  ["@babel/preset-react"],
];

如果以上所有目标都支持/ ，为什么它会将 es6 import/转换为以下内容：exportimportexport

var _styles = require("@material-ui/styles");

var _core = require("@material-ui/core");

exports.default = _default;

标签： javascriptecmascript-6babeljses6-modules

解决方案

因为你需要明确告诉 Babel 以 ES 模块为目标。它无法从您的目标浏览器列表中推断出这一点。

查看@babel-env 文档，这就是您将支持 esmodules 的方式。

"@babel/env",
  {
    "targets": {
      "esmodules": true
    }
  }

请注意：指定 esmodules 目标时，浏览器目标将被忽略。

推荐阅读