Modern.js Module 开发环境准备与基础概念指南

前言

Modern.js 是一个现代化的前端开发解决方案，其中的 Module 模块提供了一套完整的 npm 包开发工具链。本文将详细介绍使用 Modern.js Module 前需要了解的基础知识和环境准备。

环境准备

Node.js 安装与版本管理

Modern.js Module 要求 Node.js 版本 ≥ 16.0.0。推荐使用长期维护版本(LTS)以保证稳定性。

对于开发者来说，管理多个 Node.js 版本是常见需求，可以使用以下工具：

• nvm (Mac/Linux)：最流行的 Node 版本管理工具
• nvm-windows (Windows)：Windows 平台的 nvm 替代方案

这些工具允许你在不同项目间快速切换 Node.js 版本，确保开发环境的一致性。

npm 基础知识

什么是 npm 包

npm (Node Package Manager) 是 Node.js 的默认包管理器，现已成为前端生态中不可或缺的工具。一个 npm 包项目通常包含以下特征：

1. 项目根目录下有 package.json 文件
2. 可以通过 npm publish 发布到公共或私有仓库
3. 可以被其他项目作为依赖安装使用

创建 npm 包项目

初始化一个 npm 包项目非常简单：

mkdir my-package
cd my-package
npm init

执行后会生成基本的 package.json 文件，包含包的基本信息：

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

依赖管理

npm 包可以声明两种类型的依赖：

1. 生产依赖(dependencies)：项目运行时必需的包

   • 安装命令：npm install package-name
   • 会记录在 package.json 的 dependencies 字段中

2. 开发依赖(devDependencies)：仅在开发时需要的包

   • 安装命令：npm install package-name --save-dev
   • 会记录在 package.json 的 devDependencies 字段中

最佳实践：合理区分依赖类型可以减小最终打包体积，提高安装效率。

Modern.js Module 特有配置

配置文件

Modern.js Module 项目通常包含 modern.config.ts 配置文件，基本结构如下：

import { moduleTools, defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  plugins: [moduleTools()],
  buildPreset: 'npm-library',
});

虽然 Modern.js 支持直接导出配置对象，但推荐使用 defineConfig 函数以获得更好的类型提示和配置验证。

构建预设

buildPreset: 'npm-library' 是 Modern.js Module 的默认构建预设，它针对 npm 包开发场景进行了优化：

• 生成 CommonJS 和 ES Module 双格式输出
• 自动处理 TypeScript 类型声明
• 优化构建产物结构

进阶知识

包入口配置

npm 包通过 package.json 的以下字段定义入口：

1. main：CommonJS 入口，Node.js 默认解析的字段
2. module：ES Module 入口，现代打包工具优先使用
3. types：TypeScript 类型声明文件入口

现代 npm 包应该至少配置 main 和 module 两个入口，以兼容不同环境。

脚本生命周期

npm 提供了丰富的脚本生命周期钩子，Modern.js Module 构建过程也与之集成：

{
  "scripts": {
    "prebuild": "echo '准备构建'",
    "build": "modern build",
    "postbuild": "echo '构建完成'"
  }
}

执行 npm run build 时会依次触发：

1. prebuild
2. build
3. postbuild

对等依赖(peerDependencies)

当开发插件或库时，可以使用 peerDependencies 声明宿主环境的依赖要求：

{
  "peerDependencies": {
    "react": ">=16.8.0"
  }
}

这表示你的包需要宿主环境提供指定版本的 React，但不会自动安装。

包管理器选择

除了 npm 外，Modern.js Module 也支持其他主流包管理器：

1. pnpm：速度快、节省磁盘空间

   • 安装：npm install -g pnpm

2. Yarn：稳定的依赖管理

   • 安装：npm install -g yarn

推荐使用 pnpm，它在性能和一致性方面表现优异。

总结

通过本文，你应该已经掌握了：

1. Modern.js Module 开发所需的环境配置
2. npm 包的基础概念和依赖管理
3. Modern.js Module 的特有配置
4. npm 包开发的进阶知识
5. 包管理器的选择建议

这些知识将为后续使用 Modern.js Module 开发高质量 npm 包打下坚实基础。