如何导出和导入JS模块-js教程-PHP中文网

如何导出和导入JS模块

星降

发布： 2025-08-16 09:48:02

原创

942人浏览过

js模块的导出和导入主要有两种方式：1. es模块（esm），使用export和import关键字，支持命名导出、默认导出及整体导入，适用于现代浏览器和node.js（需配置.type="module"或使用.mjs扩展名）；2. commonjs，使用module.exports和require()，主要用于node.js环境。在浏览器中运行es模块需使用<script type="module">标签或构建工具。默认导出每个模块仅限一个，导入时可自定义名称，适合主功能或类；命名导出可有多个，导入时需用原名或as重命名，适合多个辅助功能。实际开发中可根据需要混合使用两种导出方式，以提高代码组织的清晰度和灵活性。

如何导出和导入JS模块

导出和导入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
```
登录后复制
对象。

在Android
本文档主要讲述的是在Android-Studio中导入Vitamio框架；介绍了如何将Vitamio框架以Module的形式添加到自己的项目中使用,这个方法也适合导入其他模块实现步骤。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

0

查看详情
- ```
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
```
登录后复制
关键字重命名），更清晰，易于维护。适合导出多个相关的功能或常量。

选择哪个取决于你的需求。如果你的模块主要提供一个功能，那么默认导出可能更合适。如果你的模块提供多个功能，那么命名导出可能更清晰。实际上，很多项目会混合使用这两种方式，根据具体情况选择。例如，一个模块可能有一个默认导出的类，以及一些命名导出的辅助函数。

以上就是如何导出和导入JS模块的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Node-RED UI模板中标签内动态数据处理指南 JavaScript模板引擎_虚拟DOM渲染机制 JavaScript_代码规范与团队协作最佳实践 JavaScript构建工具_Vite热更新机制分析 JavaScript设计模式_构建可维护大型应用架构指南