跳转到主文档

用 new 命令创建入口​​​

Modern.js 支持自动创建新入口,前面的章节中提到过,pnpm run new 可以启用可选功能。

我们也可以通过它来创建新的工程元素,在项目根目录下执行 pnpm run new

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

# 创建工程元素
❯ 新建「应用入口」
新建「Server 自定义」源码目录

# 请填写入口名称
- landing-page

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

创建完成,项目会变成这样:

.
├── .vscode/
├── src/
│ ├── hello-modern/
│ │ ├── components/
│ │ │ ├── Avatar/
│ │ │ │ ├── index.stories.tsx
│ │ │ │ └── index.tsx
│ │ │ └── Item/
│ │ │ ├── index.test.tsx
│ │ │ └── index.tsx
│ │ ├── styles/
│ │ │ └── utils.css
│ │ ├── App.css
│ │ └── App.tsx
│ ├── landing-page/
│ │ ├── App.css
│ │ └── App.tsx
│ ├── .eslintrc.json
│ └── modern-app-env.d.ts
├── .editorconfig
├── .gitignore
├── .npmrc
├── .nvmrc
├── README.md
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

可以看到联系人列表应用的文件,都被自动重构到 src/hello-modern/ 里。

同时新建了一个 src/landing-page/,里面同样有 App.tsxpnpm run new 命令只做了这些事,所以你也可以很容易的手动创建新入口或修改入口)

执行 pnpm run dev,显示:

design

访问 http://localhost:8080/,可以像之前一样看到联系人列表应用。

访问 http://localhost:8080/landing-page,可以看到刚创建的新入口 landing-page 的页面(Modern.js 自动生成的默认页面)。

手动调整应用入口

Modern.js 框架的设计原则之一是【约定优于配置(Convention over Configuration)】,多数情况下可以按约定直接写代码,不需要做任何配置,这里 src/ 中的目录结构就是一种约定:

src/hello-modern/src/landing-page/ 被自动识别为两个应用入口:hello-modern 和 landing-page。

其中 src/hello-modern/ 的目录名跟项目名(package.json 里的 name)一致,会被认为是项目主入口,项目 URL 的根路径(开发环境里默认是 http://localhost:8080/)会自动指向主入口。

其他入口的 URL,是在根路径后追加入口名,比如 http://localhost:8080/landing-page

src/ 下如果有 App.[jt]sx,就认为这个 MWA 是单入口的,src/ 下的其他文件和目录,都会被视为入口内部的文件。

src/ 下如果没有 App.[jt]sx,那么 src/ 下一级目录里,如果有 App.[jt]sx,这个目录就会被视为一个应用入口。

App.jsx 被看作约定中标识,也有其他形式的标识,之后的章节中会继续介绍。

接下来,我们把 src/hello-modern/App.tsx 重命名为 src/contacts/App.tsx

mv src/hello-modern src/contacts

再次执行 pnpm run dev,结果变成:

design

现在不再有主入口,联系人列表现在是一个普通入口,需要用 http://localhost:8080/contacts 访问。


本小节的代码可以在这里查看