js模块的导出和导入主要有两种方式：1. es模块（esm），使用export和import关键字，支持命名导出、默认导出及整体导入，适用于现代浏览器和node.js（需配置.type=”module”或使用.mjs扩展名）；2. commonjs，使用module.exports和require()，主要用于node.js环境。在浏览器中运行es模块需使用标签或构建工具。默认导出每个模块仅限一个，导入时可自定义名称，适合主功能或类；命名导出可有多个，导入时需用原名或as重命名，适合多个辅助功能。实际开发中可根据需要混合使用两种导出方式，以提高代码组织的清晰度和灵活性。
导出和导入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.jsexport const message = "Hello from myModule!";export function greet(name) { return `Hello, ${name}!`;}export default class MyClass { constructor() { this.value = "Default Value"; }}// main.jsimport { 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
对象。
如知AI笔记
如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型
27 查看详情
module.exports = { myVariable, myFunction };
exports.myVariable = "hello"; exports.myFunction = function() { ... }
导入： 使用
require()
函数。
const myModule = require("./myModule.js");
然后可以通过
myModule.myVariable
和
myModule.myFunction
来访问导出的内容。
示例：
// myModule.jsconst message = "Hello from myModule!";function greet(name) { return `Hello, ${name}!`;}module.exports = { message: message, greet: greet};// main.jsconst myModule = require("./myModule.js");console.log(myModule.message); // 输出: Hello from myModule!console.log(myModule.greet("World")); // 输出: Hello, World!
为什么我的ES模块在浏览器里跑不起来？
这通常是因为浏览器默认不支持直接运行ES模块，你需要使用构建工具（如Webpack, Parcel, Rollup）对代码进行打包，或者在HTML文件中使用
标签。
ES Module Example
注意，使用
时，你的服务器需要正确配置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
关键字重命名），更清晰，易于维护。适合导出多个相关的功能或常量。
选择哪个取决于你的需求。如果你的模块主要提供一个功能，那么默认导出可能更合适。如果你的模块提供多个功能，那么命名导出可能更清晰。实际上，很多项目会混合使用这两种方式，根据具体情况选择。例如，一个模块可能有一个默认导出的类，以及一些命名导出的辅助函数。
以上就是如何导出和导入JS模块的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/230462.html
微信扫一扫 
支付宝扫一扫 
