Question

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

SyntaxError: Cannot use import statement outside a module

我不确定是否是因为我的目录错误？我有它此PC>桌面> Javascript>模块> 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>

我正在尝试从utils.js文件中import进行编码，该文件与main.js处于同一文件夹中这是我的utils.js代码。

export function double(n){
    return n * 2;
}

在main.js文件上运行代码时，出现错误的地方是： SyntaxError: Cannot use import statement outside a module

Answer 1

您需要运行自己的Web服务器。一种简单的方法是获取Web Server for Chrome。您只需运行它，将其指向本地计算机文件夹，它将为您提供计算机在其中提供文件夹的本地主机端口号。这样，您可以通过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>

importer.js -./ relative notation is obligatory.

import { doStuff } from './exporter.js'

doStuff()

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

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

export { doStuff }

在本地服务器上，以上设置将在控制台中记录Do stuff。

忘记type="module"会导致Uncaught SyntaxError: Cannot use import statement outside a module，没有相对URL会导致Uncaught TypeError: Failed to resolve module specifier "exporter.js". Relative references must start with either "/", "./", or "../"，而URL错误会导致404。

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

1 个答案: