深入解析nwb工具链：从项目创建到构建部署全指南

nwb是一个强大的前端项目工具链，为React、Preact、Inferno和普通JavaScript项目提供了完整的开发工作流。本文将全面介绍nwb提供的各种命令及其使用方式，帮助开发者高效构建现代化前端应用。

一、项目创建命令

1.1 新建项目：nwb new

nwb new命令用于在新建目录中创建项目骨架，支持多种项目类型：

nwb new <project_type> <name>

支持的项目类型包括：

• React应用：nwb new react-app <dir-name>
• Preact应用：nwb new preact-app <dir-name>
• Inferno应用：nwb new inferno-app <dir-name>
• React组件库：nwb new react-component <dir-name>
• 普通Web应用：nwb new web-app <dir-name>
• Web模块：nwb new web-module <dir-name>

常用选项：

• -f/--force：跳过所有询问，使用默认设置强制创建项目

React组件特有选项：

• --es-modules：显式启用/禁用ES模块构建
• --umd=<var>：启用UMD构建并指定全局变量名

1.2 初始化现有项目：nwb init

nwb init命令与new类似，但会在当前目录初始化项目：

nwb init <project_type> [name]

如果未提供名称参数，将使用当前目录名作为项目名。

二、通用开发命令

2.1 开发服务器：nwb serve

启动支持热模块替换(HMR)的开发服务器：

nwb serve [entry]

核心功能：

• 实时应用JavaScript和CSS变更
• 浏览器中显示语法错误覆盖层
• React组件渲染错误也会显示为覆盖层

常用选项：

• --port：更改开发服务器端口（默认3000）
• --open：启动时自动打开浏览器
• --reload：当Webpack卡住时自动刷新页面

2.2 项目构建：nwb build

创建生产环境构建：

nwb build [entry] [dist_dir]

构建特性：

• 默认输出到dist/目录
• 自动生成包含哈希的文件名，支持长期缓存
• 默认启用生产模式优化（代码压缩、死代码消除）
• 为node_modules中的依赖生成单独的vendor文件

常用选项：

• --no-vendor：禁用vendor文件生成
• --no-html：不生成HTML文件
• NODE_ENV=development：创建开发环境构建

2.3 测试运行：nwb test

执行单元测试：

nwb test [options]

测试选项：

• --server：启动Karma服务器并监听文件变更
• --coverage：生成代码覆盖率报告

三、项目类型特定命令

nwb为不同类型项目提供了专门的命令，这些命令通常被内置在项目骨架的package.json脚本中：

3.1 构建命令

• build-react-app：构建React应用
• build-preact-app：构建Preact应用
• build-react-component：构建React组件库
• build-web-app：构建普通Web应用

3.2 开发服务器命令

• serve-react-app：启动React应用开发服务器
• serve-preact-app：启动Preact应用开发服务器
• serve-web-app：启动普通Web应用开发服务器

3.3 清理命令

• clean-app：清理应用构建目录
• clean-module：清理模块构建目录

四、配置检查命令

检查nwb配置文件是否有错误或已弃用的用法：

nwb check-config [config] [options]

选项说明：

• --command：指定命令名称测试配置变化
• --env：设置NODE_ENV测试不同环境配置

五、快速开发命令

nwb提供了一系列快速开发命令，适合从单个文件快速开始原型开发：

• nwb react：快速React开发
• nwb preact：快速Preact开发
• nwb inferno：快速Inferno开发
• nwb web：快速普通JavaScript开发

这些命令特别适合快速验证想法或创建小型原型项目。

结语

nwb工具链通过一系列精心设计的命令，为前端开发者提供了从项目初始化到开发、测试、构建的完整工作流。无论是创建完整应用还是开发可复用组件库，nwb都能提供适当的工具支持。掌握这些命令的使用方法，将显著提升您的前端开发效率。