Modern.js 模块开发入门指南：环境准备与基础概念

前言

Modern.js 是一个现代化的前端开发解决方案，其中的模块(Module)功能为开发者提供了构建高质量 npm 包的完整工具链。本文将详细介绍使用 Modern.js 模块功能前的准备工作，帮助开发者快速上手。

环境准备

Node.js 安装

Modern.js 模块开发需要 Node.js 运行环境，建议安装最新的 LTS 版本(长期支持版)，并确保版本不低于 16.0.0。不稳定的 Node.js 版本可能存在各种兼容性问题。

对于多项目开发的场景，推荐使用版本管理工具：

• Windows 用户可使用 nvm-windows
• Mac/Linux 用户可使用 nvm

这些工具可以方便地在不同 Node.js 版本间切换，满足不同项目的需求。

npm 基础知识

npm 项目结构

npm 是 Node.js 的默认包管理器，也是前端 JavaScript 生态中最重要的工具之一。一个标准的 npm 项目包含以下核心文件：

1. package.json - 项目配置文件
2. node_modules - 依赖目录
3. 源代码文件

通过执行 npm init 命令可以初始化一个 npm 项目，该命令会生成 package.json 文件，其中包含项目的基本信息：

{
  "name": "my-module",
  "version": "1.0.0",
  "description": "A sample npm package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

依赖管理

npm 项目中的依赖分为两种类型：

1. 生产依赖(dependencies)：项目运行时必需的依赖
2. 开发依赖(devDependencies)：仅在开发和测试阶段需要的依赖

安装依赖的方式：

# 安装生产依赖
npm install package-name

# 安装开发依赖
npm install package-name --save-dev

或者直接在 package.json 中声明依赖后执行 npm install。

Modern.js 模块配置

Modern.js 模块项目使用 modern.config.(j|t)s 文件作为配置文件。一个典型的配置如下：

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

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

使用 defineConfig 函数可以获得更好的类型提示，但也可以直接导出配置对象。

进阶概念

npm 包入口

package.json 中的 main 字段指定了包的入口文件。当其他项目引入你的包时，Node.js 会加载这个文件。现代构建工具还会识别 module 字段，用于指定 ES 模块格式的入口。

脚本生命周期

npm 提供了丰富的脚本生命周期钩子，常用的包括：

1. install 相关：

   • preinstall
   • install
   • postinstall

2. publish 相关：

   • prepublishOnly
   • prepack
   • postpack

这些钩子可以让你在特定阶段执行自定义逻辑。

peerDependencies

当你的模块需要与宿主环境(如 Webpack 插件需要 Webpack)配合使用时，应该使用 peerDependencies 声明这种关系。这样可以避免重复安装依赖，同时确保版本兼容性。

包管理器选择

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

1. pnpm：速度快，磁盘空间利用率高
2. Yarn：稳定性好，功能丰富

推荐使用 pnpm，安装方式：

npm install -g pnpm

总结

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

1. Modern.js 模块开发的环境要求
2. npm 项目的基本结构和管理方式
3. Modern.js 模块的基本配置
4. npm 包开发的核心概念

这些知识将为后续的 Modern.js 模块开发打下坚实基础。准备好环境后，就可以开始创建你的第一个 Modern.js 模块项目了。