javascript - 无法弄清楚如何使用 javascript 在浏览器中导入模块
问题描述
这是一个简单的问题。我正在尝试将模块从一个 javascript 文件导入到另一个文件,然后在 Chrome 上运行它。我正在使用 2 个 javascript 文件和一个 html 文件,它们都在同一个文件夹中:
第一个 js 文件(testfile1.js):
import {test} from 'testfile2.js';
test.func();
第二个js文件(testfile2.js):
let f = function() {
console.log("TEST");
}
let test = {
func: f
};
export test;
html 文件是普通的空 html 文件,标题中包含指向 testfile1.js 脚本的链接:
<script type="text/javascript" src="testfile1.js"></script>
每当我在 chrome 中打开 html 文件时,我都会收到错误消息:
testfile1.js:1 Uncaught SyntaxError: Unexpected token {
当我删除导入语句中的括号时,我得到了一个意外的标识符语句。这不是在浏览器中导入模块的正确方法吗?为什么它根本不起作用?
解决方案
模块type="module"
不需要"text/javascript"
根据 Jaromanda X 的评论,您需要将标签type
属性的值更改为模块代码。<script>
"module"
import { test } from 'testfile2.js'
<script type="module" src="testfile1.js" />
动态呢import()
如果你真的不想使用type="module"
,任何 javascript 文件都可以使用动态import()
语法,即使没有type="module"
.
但是,动态导入有一个警告,该函数import()
返回一个 Promise,因此您无法同步使用它。您必须使用它解析为的值await
或.then
动态导入。
import('testfile2.js').then(({ test }) => {
// your code
});