JavaScript 模块化和包管理

1. 什么是模块化？

模块化是一种编程范式，它将程序划分为小的、独立的单元（模块），每个模块包含特定的功能。通过模块化，可以在项目中更好地组织代码、复用代码，并增强维护性和可读性。

模块化的主要好处：

• 代码复用：一个模块可以在多个项目中重复使用。
• 清晰结构：每个模块独立承担特定功能，便于理解和维护。
• 避免命名冲突：模块内部的变量和函数不直接暴露到全局作用域中。

2. JavaScript 中的模块化

2.1 ES6 模块（import 和 export）

ES6 引入了标准化的模块系统。通过 export 关键字可以导出模块中的变量或函数，通过 import 导入这些模块。

导出模块

可以使用 export 导出变量、函数或类：

// math.js
export function add(a, b) {
    return a + b;
}

export const pi = 3.14159;

导入模块

可以使用 import 关键字引入模块中导出的内容：

// main.js
import { add, pi } from './math.js';

console.log(add(2, 3)); // 5
console.log(pi);        // 3.14159

2.2 默认导出（export default）

一个模块只能有一个默认导出，导入时不需要使用大括号。

// greeting.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

// main.js
import greet from './greeting.js';
console.log(greet("Alice")); // Hello, Alice!

2.3 命名导出和默认导出混合使用

可以在一个模块中同时使用命名导出和默认导出：

// person.js
export const name = "Alice";
export default function greet() {
    console.log("Hello, world!");
}

导入时可以同时使用这两种方式：

import greet, { name } from './person.js';

console.log(name); // Alice
greet();           // Hello, world!

2.4 动态导入（import()）

动态导入允许在代码执行时按需加载模块。它返回一个 Promise，在模块加载完成时解析。

import('./math.js').then(module => {
    console.log(module.add(3, 4));  // 使用导入的模块
});

3. CommonJS 模块（Node.js 环境）

在 ES6 模块系统普及之前，Node.js 使用的是 CommonJS 模块系统，通过 module.exports 和 require 来导出和导入模块。

// utils.js
module.exports = {
    sayHello: function() {
        return "Hello, world!";
    }
};

导入模块使用 require 语句：

// app.js
const utils = require('./utils.js');
console.log(utils.sayHello()); // Hello, world!

CommonJS 与 ES6 模块对比

• 同步 vs 异步：CommonJS 是同步导入，适用于服务器端；ES6 模块系统是异步的，更适合浏览器环境。
• 默认导出：CommonJS 使用 module.exports 进行默认导出；ES6 模块可以直接使用 export default。

4. 包管理工具：npm 和 Yarn

4.1 npm

npm（Node Package Manager）是 JavaScript 社区中最常用的包管理工具。它随 Node.js 一起安装，用于管理项目依赖、发布和共享模块。

安装包

通过 npm install 命令安装包：

npm install lodash

安装特定版本：

npm install lodash@4.17.15

安装全局包

某些工具需要在全局环境中使用，可以使用 -g 标志：

npm install -g create-react-app

本地和全局依赖

• 本地依赖：只在当前项目中可用，安装后出现在 node_modules 文件夹中。
• 全局依赖：可以在系统全局环境中使用。

4.2 package.json

package.json 文件定义了项目的所有依赖包及其版本信息，同时包含脚本配置和项目元数据。

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^4.17.15"
  },
  "scripts": {
    "start": "node index.js"
  }
}

安装所有依赖

通过以下命令安装 package.json 中列出的所有依赖：

npm install

4.3 Yarn

Yarn 是另一种包管理工具，与 npm 相比，它的主要优势是速度快、更加一致的安装流程和改进的缓存处理。

安装包的语法类似：

yarn add lodash

Yarn 也支持全局安装：

yarn global add create-react-app

npm 与 Yarn 对比

特性	npm	Yarn
安装速度	较慢	更快
锁定文件	package-lock.json	yarn.lock
依赖版本管理	自带	更严格
依赖并行安装	支持（npm v5+）	默认支持

5. 创建和发布自己的包

使用 npm 创建并发布包到 npm 注册表，使其可供其他开发者使用。

5.1 初始化项目

首先，通过 npm init 命令创建一个新的 package.json 文件：

npm init

按照提示填写包的名称、版本、描述等信息。

5.2 编写代码

创建 index.js 文件并导出包的主要功能：

// index.js
module.exports = function() {
    console.log("Hello, npm!");
};

5.3 发布到 npm

首先确保已在 npm 上创建账户并登录，然后可以发布：

npm login
npm publish

发布完成后，其他人就可以通过 npm install package-name 安装你的包。