rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
95 lines (62 loc) • 3.36 kB
Markdown
title: 用命令行工具创建项目
上一章节中，我们介绍了如何手动创建一个 Modern.js MWA 项目。
这一章节中，我们将会学习使用命令行工具，更方便的创建。
可以用已存在的空目录来创建项目：
```bash
mkdir hello-modern
cd hello-modern
npx @modern-js/create
```
也可以用新目录来创建项目：
```bash
npx @modern-js/create hello-modern
cd hello-modern
```
`@modern-js/create` 是 Modern.js 生成器。不要全局安装 `@modern-js/create`，用 npx 按需运行，可以始终运行最新版。
生成器会提供一个可交互的问答界面，根据后续的问答结果，按需运行不同的【 微生成器（micro-generator）】，在生成项目之后也会自动安装依赖、创建 git 仓库。
:::note 微生成器（micro-generator）
传统脚手架通常提供整个项目级别的生成器，基于模板，一用即抛，生成完项目之后，对后续的业务迭代没有帮助。
微生成器关注的是项目的整个生命周期，既可以生成项目中各种粒度各种类型的文件模块（比如教程后面会提到的 entry、component、model 等），也可以生成抽象的业务逻辑（可能不创建新文件，而是在现有文件上做自动重构）。微生成器不是只在最初创建项目的时候使用的一次性工具，而是伴随项目后续迭代过程的工具箱。Modern.js 也可以支持业务项目添加自己业务专用的微生成器。
Modern.js 生成器是基于微生成器和 MWA（Universal App，不需要多套模板）的项目生成器，会在问答过程中，按需加载不同的微生成器，动态生成不同的初始文件和代码或修改重组已有的文件和代码。在这种模式下，业务开发者可以方便地对 Modern.js 生成器进行定制，实现个性化的业务工程方案生成器。
:::
### 初始化项目
Modern.js 生成器会通过交互式的问题获取一些必要信息，动态生成最合适的项目内容，我们先按以下选择创建：
```bash
# 请选择你想创建的工程类型
❯ 应用
模块
项目组
# 请选择开发语言
TS
❯ ES6+
# 请选择包管理工具
❯ pnpm
Yarn
# 是否需要支持以下类型应用
❯ 不需要
Electron
# 是否需要调整默认配置
❯ 否
是
```
项目生成后，在项目根目录执行 `pnpm run dev` 就可以直接进行调试了：
### 扩展项目
如上所述，微生成器是伴随项目后续迭代过程中的工具箱，可以使用 `pnpm run new` 在需要的时候来扩展项目。
执行 `pnpm run new` 后，我们按照以下选择，开启可选的 Unbundled 开发模式：
```bash
# 请选择你想要的操作
创建工程元素
❯ 启用可选功能
# 启用可选功能
❯ 启用「Unbundled 开发」模式
启用 Tailwind CSS 支持
...
```
选择 **启用「Unbundled 开发」模式**，等待命令运行结束，可以看到在 `package.json` 中新增了 `@modern-js/plugin-unbundle` 依赖，并且依赖已经完成安装。
执行 `pnpm run dev:esm` 就可以进入 Unbundled 模式进行开发调试。
:::note 注
Unbundled 模式暂不支持在 Windows 平台使用，支持即将上线。
:::