无法弄清楚如何使用JavaScript在浏览器中导入模块

a1o7rhls  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(173)

这是一个简单的问题。我尝试将模块从一个javascript文件导入到另一个javascript文件,然后在Chrome上运行它。我使用了两个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 {

当我删除import语句中的方括号时,我得到了一个意外的标识符语句。这不是在浏览器中导入模块的正确方法吗?为什么一点用都没有?

mctunoxg

mctunoxg1#

模块需要type="module"而不是"text/javascript"

根据Jaromanda X的评论,您需要将<script>标记的type属性的值更改为"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
});

相关问题