Question

我在一个文件夹中有“三个”文件 1. 索引 .html 2. 索引 .js 3. helper .js

我想从helper.js导出代码并将代码导入index.js（我已经将index.js链接到index.html）。

我确实那样 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <button id="btn">click</button>


    <script src="./index.js"></script>
</body>
</html>

index.js

import btn from './helper'

btn.addEventListener('click', function () {
    window.alert('i am clicked')
})

最后是 helper.js

export let btn = document.getElementById('btn')

然后我在chrome浏览器中运行 index.html 文件。

Chrome浏览器在控制台中显示此消息。

未捕获的语法错误：无法在模块外部使用import语句

请告诉我如何解决该问题。我在google和youtube上搜索，它们所做的与我所做的相同。结果，浏览器显示了该消息。

Answer 1

您需要将导入包括在模块内部：

尝试一下：

<script type="module">
   import btn from './helper'
</script>

参考：ES Modules in Browsers

Answer 2

您将需要通过某个端口（例如5500）上的Web服务器提供文件，然后将浏览器指向该端口，即localhost：5500 /

这是浏览器从另一个js文件导入其他模块的唯一方法。

请参阅... MDN Doc on Modules

您可以使用npm软件包http-server。
如果使用的是Visual Studio Code，则扩展为Live Server。
或您喜欢的任何其他服务器都可以在您的系统上运行。

接下来，您需要在脚本标记中添加type =“ module”。

<button id="btn">click</button>


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

然后您的index.js尝试一下...

import { btn } from './helper.js'

最后是您的helper.js...。

const btn = document.getElementById('btn');

export { btn };

您可能还会考虑在模块的js文件上使用.mjs扩展名。让Enyone知道它确实是一个模块。

我无法解决“未捕获的SyntaxError：无法在模块外部使用import语句”的问题

2 个答案:

请参阅... MDN Doc on Modules