在Java脚本（通常指JavaScript）开发中，”导包”是一个核心概念，尤其在大型项目或使用模块化规范的场景下，这里的”包”可以理解为封装好的功能模块、库或第三方工具集，导包则是将这些预定义的功能引入到当前文件中使用，JavaScript的模块化发展经历了多个阶段，不同环境下的导包方式也有所差异,本文将系统梳理主流的导包方法及其应用场景。
传统脚本引入方式（非模块化）
在模块化规范普及之前，JavaScript主要通过<script>标签引入外部文件，这种方式本质上是全局变量共享，而非真正的模块导包，使用jQuery库时,会在HTML中直接写入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
这种方式下，jQuery会自动将核心对象挂载到全局的window对象上，开发者直接通过或jQuery调用即可，但这种方法存在明显缺点：全局变量污染、依赖关系不明确、代码复用性差，且无法支持作用域隔离,仅适用于简单页面或遗留项目维护。
CommonJS规范（Node.js环境）
Node.js率先采用了CommonJS规范，成为服务器端JavaScript的模块化标准，在CommonJS中，每个文件都是一个独立的模块，通过require()函数同步加载模块，通过module.exports或exports导出模块内容。
导出模块时，可以导出变量、函数、对象等：
// math.js
const add = (a, b) => a + b;
const PI = 3.14159;
module.exports = { add, PI }; // 或 exports.add = add; exports.PI = PI;
导入模块时，使用require()获取导出的内容：
// app.js
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出: 3
console.log(math.PI); // 输出: 3.14159
CommonJS的优势在于简单直观，适合服务端开发，但同步加载机制在浏览器端会导致阻塞,因此不直接适用于前端环境。
ES Module规范（现代前端标准）
ES Module（ESM）是ECMAScript官方推出的模块化标准，已成为现代前端开发的主流方案，它通过import和export关键字实现模块的导入导出，支持静态分析和异步加载，天然适合浏览器环境。
导出模块时,可使用命名导出或默认导出：
// utils.js
export const formatDate = (date) => date.toLocaleDateString(); // 命名导出
export default class Calculator { // 默认导出
constructor(value) { this.value = value; }
}
导入模块时,需根据导出方式对应使用：
// app.js
import Calculator, { formatDate } from './utils.js'; // 默认导出与命名导出结合
const calc = new Calculator(100);
console.log(formatDate(new Date())); // 输出: 当前日期字符串
ESM支持动态导入（import()），返回Promise,适合按需加载模块：
if (condition) {
const module = await import('./dynamic-module.js');
module.doSomething();
}
现代浏览器和Node.js（v12+）已原生支持ESM，但需注意浏览器环境需在<script>标签添加type="module"属性，且文件路径需使用完整路径或配置importmap。
模块打包工具（Webpack/Vite等）
实际前端项目中，通常使用Webpack、Vite等工具处理模块依赖，这些工具不仅能解析ESM和CommonJS，还能将代码打包、压缩、分割，并处理资源文件（如CSS、图片）。
以Webpack为例，通过配置entry和output，可将多个模块打包成少数文件，安装第三方库（如Lodash）后，直接通过import引入：
npm install lodash
import _ from 'lodash'; const array = [1, 2, 3]; console.log(_.shuffle(array)); // 输出: 打乱顺序的数组
Webpack会自动处理模块依赖关系，生成兼容浏览器的静态资源，Vite则利用浏览器原生ESM支持,实现更快的开发服务器启动和热更新。
TypeScript中的模块导入
在TypeScript中，模块导入与ESM语法一致,但增加了类型检查支持：
import axios, { AxiosResponse } from 'axios';
async function fetchData(): Promise<AxiosResponse> {
return await axios.get('https://api.example.com/data');
}
TS会编译为JavaScript，同时通过tsconfig.json的module选项（如"ES6"、"CommonJS"）控制输出格式。
JavaScript的”导包”方式从全局脚本引入发展到模块化规范，再到工具链整合，形成了清晰的演进路径，CommonJS适用于Node.js服务端，ESM是现代前端标准，而打包工具则提供了工程化解决方案，开发者需根据项目环境（浏览器/Node.js）、依赖类型（第三方库/自定义模块）及工程化需求，选择合适的导包方式,以实现代码的高效组织和复用。
