Question

我正在使用vanilla JavaScript创建单页应用。我想在不同的文件中组织我的代码以使其模块化，这意味着我应该能够访问另一个文件中的一个文件中定义的函数。我正在使用ES6原生import export：

文件1.js：

export function func1() {}
export function func2() {}

文件2.js：

import { func1, func2 } from './file-1';

的index.html：

<script src="file-1.js"></script>

当我在Chrome（版本65）中运行index.html时，出现以下错误： Uncaught SyntaxError: Unexpected token {。

我的代码有什么问题？ Chrome 65完全支持ES6模块系统。

Answer 1

这是一个工作示例

<强> file1.mjs

function log1() {
  console.log('log1');
}
function log2() {
  console.log('log2');
}
export { log1, log2 };

file2.mjs 您必须明确撰写.mjs扩展名

import { log1, log2 } from './file1.mjs';

log1();
log2();

index.html 通知属性 type =“module”

<body>
    <script type="module" src="file2.mjs"></script>
</body>

然后你需要一个静态服务器来摆脱CORS块。

$ yarn global add serve
$ serve ./

最后转到http://localhost:5000，它会起作用

更新：It is recommended to use .mjs file extension for modules instead of .js

Answer 2

Chrome（v70）在使用import协议提供的本地文件上使用file语法时，会遇到某种问题。根据某些文章，使用file协议可能会发生CORS阻止。但是在这种情况下，Chrome也不会在控制台中显示CORS警告-这很奇怪。因此，需要某种HTTP服务器，以便通过HTTP协议提供文件（如Vu在他的回答中所示）。 Firefox v63（可能是> v60）没有这些问题，您可以使用html协议将js与file://模块组成，而无需特殊的服务器。

还请确保：

在导入（import { func1, func2 } from './file-B.js';）时使用文件类型扩展名。
在html type="module"元素（script）中使用<script type="module" src="file-A.js"></script>

导入无法在Chrome中运行

2 个答案: