js模块的导出和导入主要有两种方式：1. es模块（esm），使用export和import关键字，支持命名导出、默认导出及整体导入，适用于现代浏览器和node.js（需配置.type="module"或使用.mjs扩展名）；2. commonjs，使用module.exports和require()，主要用于node.js环境。在浏览器中运行es模块需使用<script type="module">标签或构建<a style="color:#f60; text-decoration:underline;" title= "工具" href="https://www.php.cn/zt/16887.html" target="_blank">工具。默认导出每个模块仅限一个，导入时可自定义名称，适合主功能或类；命名导出可有多个，导入时需用原名或as重命名，适合多个辅助功能。实际开发中可根据需要混合使用两种导出方式，以提高代码组织的清晰度和灵活性。</script>
导出和导入JS模块，简单来说，就是让你在一个JS文件中编写的代码，可以在另一个JS文件中使用。这就像搭积木，把不同功能的积木块组合起来，构建更复杂的应用。
解决方案
JS模块的导出和导入主要有两种方式：ES模块（ESM）和CommonJS。ESM是现代浏览器的标准，而CommonJS则主要用于Node.js环境。
ES模块 (ESM)
-
导出： 使用
export
关键字。可以导出单个变量、函数、类，也可以导出多个。-
命名导出：
export const myVariable = "hello"; export function myFunction() { ... } -
默认导出：
export default function() { ... }一个模块只能有一个默认导出。
-
命名导出：
-
导入： 使用
import
关键字。-
命名导入：
import { myVariable, myFunction } from "./myModule.js"; -
默认导入：
import myDefaultFunction from "./myModule.js";
-
全部导入：
import * as myModule from "./myModule.js";
这样会将模块的所有导出内容作为myModule
对象的属性来访问。
-
命名导入：
-
示例：
// myModule.js export const message = "Hello from myModule!"; export function greet(name) { return `Hello, ${name}!`; } export default class MyClass { constructor() { this.value = "Default Value"; } } // main.js import { message, greet } from "./myModule.js"; import MyClass from "./myModule.js"; console.log(message); // 输出: Hello from myModule! console.log(greet("World")); // 输出: Hello, World! const myInstance = new MyClass(); console.log(myInstance.value); // 输出: Default Value
CommonJS
-
导出： 使用
module.exports
或exports
对象。module.exports = { myVariable, myFunction };exports.myVariable = "hello"; exports.myFunction = function() { ... }
-
导入： 使用
require()
函数。const myModule = require("./myModule.js");然后可以通过myModule.myVariable
和myModule.myFunction
来访问导出的内容。
-
示例：
// myModule.js const message = "Hello from myModule!"; function greet(name) { return `Hello, ${name}!`; } module.exports = { message: message, greet: greet }; // main.js const myModule = require("./myModule.js"); console.log(myModule.message); // 输出: Hello from myModule! console.log(myModule.greet("World")); // 输出: Hello, World!
为什么我的ES模块在浏览器里跑不起来？
这通常是因为浏览器默认不支持直接运行ES模块，你需要使用构建工具（如Webpack, Parcel, Rollup）对代码进行打包，或者在HTML文件中使用
<script type="module">标签。
<!DOCTYPE html> <html> <head> <title>ES Module Example</title> </head> <body> <script type="module" src="main.js"></script> </body> </html>
注意，使用
<script type="module">时，你的服务器需要正确配置MIME类型，将
.js文件作为JavaScript模块提供。
如何在Node.js中使用ES模块？
从Node.js v13.2开始，已经原生支持ES模块。你可以通过以下两种方式启用ES模块：
-
使用
.mjs
扩展名： 将你的文件保存为.mjs
扩展名，Node.js会将其视为ES模块。 -
在
package.json
中设置"type": "module"
： 这样，项目中的所有.js
文件都会被视为ES模块。
{
"name": "my-project",
"version": "1.0.0",
"type": "module",
"dependencies": {
// ...
}
}需要注意的是，一旦启用了ES模块，你就不能再使用
require()函数来导入CommonJS模块。你需要使用
import()函数进行动态导入，或者使用
import { createRequire } from 'module';来创建一个require函数。
默认导出和命名导出有什么区别？我应该用哪个？
主要区别在于导入方式和数量限制。
- 默认导出： 一个模块只能有一个默认导出，导入时可以自定义名称，更简洁。适合导出模块的主要功能或类。
-
命名导出： 一个模块可以有多个命名导出，导入时必须使用相同的名称（或者使用
as
关键字重命名），更清晰，易于维护。适合导出多个相关的功能或常量。
选择哪个取决于你的需求。如果你的模块主要提供一个功能，那么默认导出可能更合适。如果你的模块提供多个功能，那么命名导出可能更清晰。实际上，很多项目会混合使用这两种方式，根据具体情况选择。例如，一个模块可能有一个默认导出的类，以及一些命名导出的辅助函数。
