JavaScript 模块导入/导出答案

【问题标题】：JavaScript modules import / exportJavaScript 模块导入/导出
【发布时间】：2020-04-16 08:31:12
【问题描述】：

我刚刚了解了 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');

谁能启发我并告诉我有什么区别，如果我这样做在技术上是正确的？

提前致谢！

【问题讨论】：

标签： javascript import module export

【解决方案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 的底部。）

【讨论】：

您好 TJ，感谢您的回答。我也尝试过通过创建样板 html 文件并包含脚本标签：<script type="module" src="./main.js" ></script> 我收到这些错误：Access to script at 'file:///Users/Mike/Desktop/test%20environment/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.main.js:1 Failed to load resource: net::ERR_FAILED
@MikeRophone - 看起来你的浏览器需要使用服务器，而不是直接打开文件。一般来说，您希望在进行 Web 开发时使用 http: 或 https: URL，当您使用 file: URL 时，有几件事会略有不同。为了获得可靠的体验，请始终通过服务器。
我明白了，我会尝试然后将结果发回！感谢您的帮助！
@MikeRophone - FWIW，我在几个月后出版的新书中深入介绍了模块（第 13 章）。 ;-) 如果您有兴趣，请查看我的个人资料了解详情。
现在可以使用了。我在 VS Code 中安装了“Live Server”扩展，它运行完美！再次感谢您的帮助！

【解决方案2】：

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

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

巴别塔-https://babeljs.io/

【讨论】：

ESM（ECMAScript 模块）被所有现代浏览器和 Node.js 原生支持。除非您需要针对过时的浏览器，否则您不需要捆绑器。您可以选择使用一个，但您不需要。