JavaScript 模块导入/导出

Question

我刚刚了解了 JS 中的模块。我正试图在我的机器上运行它，但我仍然有几个问题，因为它只在某些情况下有效。

我看过并尝试过使用以下语法的 YouTube 视频中的示例：

// number.js
export const num = 5;

// main.js
import { num } from './number.js'


//This throws the following error:

import { num } from './number.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

就我而言，它只有在我这样做时才有效：

// number.js
const num = 10;
module.exports =  { num };

// main.js
const num = require('./number.js');

任何人都可以启发我并告诉我有什么区别，我这样做在技术上是否正确？

提前致谢！

Answer 1

你的 export 和 import 声明很好，只是环境不知道 main.js 是一个模块。

如果您在 Node.js 上执行此操作，请参阅 their documentation 了解详细信息，但简短版本要么将 "type": "module" 放入您的 package.json 中，要么使用扩展名.mjs.

如果您在浏览器上执行此操作，main.js 文件的 script 标记需要包含 type="module"，以便 JavaScript 引擎知道它是模块。这是 live example on CodeSandbox.:

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" />
    <script src="./main.js" type="module"></script>
    <title>Export / Import Example</title>
  </head>
  <body></body>
</html>

main.js:

import { num } from "./number.js";

document.body.appendChild(document.createTextNode(`num = ${num}`));

number.js:

export const num = 5;

（请注意，由于 type="module" 会自动延迟脚本，因此无需像处理非模块脚本那样将其放在 body 的底部。）

Answer 2

module.exports() 函数是 nodejs 自带的默认函数，是 requirejs 模块的一部分。另一方面，导入和导出更多的是 ES6 及更高版本的功能，我相信您需要 webpack 模块或 babel 模块将其转换为浏览器渲染引擎可以在运行时理解的正常 ES5 语法。这是上面两个模块的link。

webpack - https://webpack.js.org/

通天塔 - https://babeljs.io/

JavaScript 模块导入/导出

JavaScript modules import / export

javascript

import

module

export