使用 ES6 babel 编译模块"SyntaxError: import not found"

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);

然后在index.html中的body标签底部包含main.js

<script type="module" src="/main.js"></script>

运行页面后，控制台会给我以下错误：

未捕获语法错误：找不到导入：默认

我认为我没有正确配置babel，但我无法正确配置。感谢您的帮助。

Answer 1

我认为问题是您在浏览器中使用了ES6模块语法，但您导入的文件已被传输而不是以使用ES6模块句法。请注意，如果将源bundle.js文件粘贴到dist/bundle.js中，效果会很好。

解决这个问题的一种方法是如下更改.babelrc文件，这样模块语法就不会被转换：

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

另一种方法是也对main.js进行transfile，并从脚本标记中删除type="module"。