跳转到主文档

​用命令行工具创建项目​​

上一章节中,我们介绍了如何手动创建一个 Modern.js MWA 项目。

这一章节中,我们将会学习使用命令行工具,更方便的创建。

可以用已存在的空目录来创建项目:

mkdir hello-modern

cd hello-modern

npx @modern-js/create

也可以用新目录来创建项目:

npx @modern-js/create hello-modern

cd hello-modern

@modern-js/create 是 Modern.js 生成器。不要全局安装 @modern-js/create,用 npx 按需运行,可以始终运行最新版。

生成器会提供一个可交互的问答界面,根据后续的问答结果,按需运行不同的【 微生成器(micro-generator)】,在生成项目之后也会自动安装依赖、创建 git 仓库。

微生成器(micro-generator)

传统脚手架通常提供整个项目级别的生成器,基于模板,一用即抛,生成完项目之后,对后续的业务迭代没有帮助。

微生成器关注的是项目的整个生命周期,既可以生成项目中各种粒度各种类型的文件模块(比如教程后面会提到的 entry、component、model 等),也可以生成抽象的业务逻辑(可能不创建新文件,而是在现有文件上做自动重构)。微生成器不是只在最初创建项目的时候使用的一次性工具,而是伴随项目后续迭代过程的工具箱。Modern.js 也可以支持业务项目添加自己业务专用的微生成器。

Modern.js 生成器是基于微生成器和 MWA(Universal App,不需要多套模板)的项目生成器,会在问答过程中,按需加载不同的微生成器,动态生成不同的初始文件和代码或修改重组已有的文件和代码。在这种模式下,业务开发者可以方便地对 Modern.js 生成器进行定制,实现个性化的业务工程方案生成器。

初始化项目

Modern.js 生成器会通过交互式的问题获取一些必要信息,动态生成最合适的项目内容,我们先按以下选择创建:

# 请选择你想创建的工程类型
❯ 应用
模块
Monorepo

# 请选择开发语言
TS
❯ ES6+

# 请选择包管理工具
pnpm
Yarn

# 是否需要支持以下类型应用
❯ 不需要
Electron

# 是否需要调整默认配置
❯ 否

项目生成后,在项目根目录执行 pnpm run dev 就可以直接进行调试了:

vsc-alert

扩展项目

如上所述,微生成器是伴随项目后续迭代过程中的工具箱,可以使用 pnpm run new 在需要的时候来扩展项目。

执行 pnpm run new 后,我们按照以下选择,开启可选的 Unbundled 开发模式:

# 请选择你想要的操作
创建工程元素
❯ 启用可选功能

# 启用可选功能
❯ 启用「Unbundled 开发」模式
启用 Tailwind CSS 支持
...

选择 启用「Unbundled 开发」模式,等待命令运行结束,可以看到在 package.json 中新增了 @modern-js/plugin-unbundle 依赖,并且依赖已经完成安装。

执行 pnpm run dev:esm 就可以进入 Unbundled 模式进行开发调试。

Unbundled 模式暂不支持在 Windows 平台使用,支持即将上线。