我无法解决“未捕获的语法错误:无法在模块外使用导入语句”的问题

SA *_*med 6 javascript ecmascript-6

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

我想从中导出代码helper.js并将代码导入到index.js(我已经链接index.jsindex.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>

Run Code Online (Sandbox Code Playgroud)

索引.js

import btn from './helper'

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

Run Code Online (Sandbox Code Playgroud)

最后是helper.js

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

Run Code Online (Sandbox Code Playgroud)

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

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

未捕获的语法错误:无法在模块外使用导入语句

请告诉我如何解决这个问题。我在 google 和 youtube 上搜索,我做了他们展示的同样的事情。结果,浏览器显示那个按摩。

Gui*_*tin 7

您需要将导入包含在模块中:

尝试这个:

<script type="module">
   import btn from './helper'
</script>
Run Code Online (Sandbox Code Playgroud)

参考:浏览器中的 ES 模块

  • 我尝试了 **type="module"** 但显示错误 **从源 'null' 访问 'file:///D:/testing/index.js' 处的脚本已被 CORS 策略阻止:跨源仅支持以下协议方案的请求:http、data、chrome、chrome-extension、https。** (2认同)
  • 现在是另一个错误。您试图访问没有来源的脚本。像 Chrome 这样的浏览器不允许您使用 JavaScript 访问本地文件系统上的文件。您需要安装一个 Web 服务器,例如 LiveServer。 (2认同)