Javascript模块语法错误：无法在模块外部使用import语句_Javascript_Import_Module_Export

Javascript模块语法错误：无法在模块外部使用import语句

javascript import module

Javascript模块语法错误：无法在模块外部使用import语句,javascript,import,module,export,Javascript,Import,Module,Export,所以我试着从youtube视频中学习模块，我也跟着他，但由于某种原因，我的代码与他的代码完全相同，并且给了我错误 SyntaxError:无法在模块外部使用导入语句我不确定是不是因为我的目录错了？我把它藏起来了这台PC>Desktop>Javascript>module>js>main.js 这是main.js中的代码 import{double} from './utils.js' console.log(double(5)) 我还有一个index.html文件位于模块文件夹中这是我

所以我试着从youtube视频中学习模块，我也跟着他，但由于某种原因，我的代码与他的代码完全相同，并且给了我错误

SyntaxError:无法在模块外部使用导入语句

我不确定是不是因为我的目录错了？我把它藏起来了这台PC>Desktop>Javascript>module>js>main.js 这是main.js中的代码

import{double} from './utils.js'

console.log(double(5))

我还有一个index.html文件位于模块文件夹中这是我的index.html代码

<!DOCTYPE html>
<head>
    <title>JavaScript Modules</title>
    <meta name="viewport" content="width=device-width, initial scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/assets/dcode.css">
    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
</head>

<body>
    <h1>JavaScript Modules</h1>
    <u1>
        <li>Split up your code into separate components</li>
        <li>Therefore easier to maintain and organize</li>
        <li>Supported in major browsers(excl. IE)</li>
    </u1>

    <script type="module" src="./js/main.js"></script>
</body>

当我在main.js文件上运行代码时，我会发现错误：

语法错误：无法在模块外部使用import语句

您需要运行自己的Web服务器。一个简单的方法是得到一份工作。您只需运行它，将它指向您的本地计算机文件夹，它将为您提供一个本地主机端口号，您的计算机正在为该文件夹提供服务。这样，您就可以通过HTTP访问本地文件夹

具有以下文件夹结构：

/exports/
   user.html
   importer.js
   exporter.js

其中

user.html

是使用

importer.js

脚本的页面，该脚本依次加载

exporter.js

，您使用以下语法：

user.html --必须使用

type=“module”

符号

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

exporter.js --在生产环境中，这是您的库或模块

function doStuff() {
   console.log('Do stuff')
}

export { doStuff }

对于本地服务器，上述设置将在控制台中记录

Do stuff

忘记

type=“module”

会导致

Uncaught语法错误：无法在模块外部使用import语句，没有相对URL将导致Uncaught类型错误：无法解析模块说明符“exporter.js”。相对引用必须以“/”、“/”或“./”
开头，如果URL错误，则会导致404。
让我猜猜。。。在测试此项时，您没有运行Web服务器。。。如果没有为文件提供正确的mime类型，浏览器将无法识别这些文件。使用npxucdn--debug并在该地址上进行测试，或者使用任何其他单行服务器端，而不是将该html页面作为文件运行。我感谢您的回答，我在发布本文的当天就已经解决了这个问题。但是，如果其他人也有同样的问题，并且遇到了这个问题，那么这篇文章现在有了一个正式的答案，这真是太好了。我个人使用github的http服务器/http方来设置本地服务器。不过，这也应该有效！谢谢
import { doStuff } from './exporter.js'

doStuff()

function doStuff() {
   console.log('Do stuff')
}

export { doStuff }