ES6 babel编译模块出​​现“ SyntaxError：找不到导入”

Question

我具有以下项目结构：

├── node_modules
│   └── (dependencies, etc.)
├── dist
│   └── bundle.js
├── src
│   └── bundle.js
├── index.html
├── main.js
├── .babelrc
├── package-lock.json
└── package.json

我的.babelrc包含以下内容：

{
  "presets": ["@babel/preset-env"]
}

我的package.json中包含以下内容：

"browserslist": "defaults and supports es6-module"

我的来源bundle.js包含以下内容：

const foo = "foo";
export default foo;

使用babel编译时，我的发行版bundle.js包含以下内容：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var foo = "foo";
var _default = foo;
exports["default"] = _default;

我将此编译后的包导入我的main.js中：

import foo from "/dist/bundle.js";
console.log(foo);

然后在main.js的{​​{1}}标签底部添加body

index.html

运行页面后，控制台会显示以下错误：

未捕获的SyntaxError：找不到导入：默认

我认为我没有正确配置babel，但是我无法确定这样做的正确性。任何帮助表示赞赏。

Answer 1

我认为问题是您在浏览器中使用了ES6模块语法，但是要导入的文件已被转译为 not 以使用ES6模块语法。请注意，如果您将源bundle.js文件粘贴到dist/bundle.js，则可以正常工作。

解决此问题的一种方法是如下更改.babelrc文件，以使模块语法不会被转译：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

另一种方法是也转译main.js，并从脚本标签中删除type="module"。