rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
105 lines (74 loc) • 3.84 kB
Markdown
---
title: 用 new 命令创建入口
---
Modern.js 支持自动创建新入口，前面的章节中提到过，`pnpm run new` 可以启用可选功能。
我们也可以通过它来创建新的工程元素，在项目根目录下执行 `pnpm run new`：
```bash
# 请选择你想要的操作
❯ 创建工程元素
启用可选功能
# 创建工程元素
❯ 新建「应用入口」
新建「Server 自定义」源码目录
# 请填写入口名称
- landing-page
# 是否需要调整默认配置
❯ 否
是
```
创建完成，项目会变成这样：
```md
.
├── .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.tsx`（`pnpm run new` 命令只做了这些事，所以你也可以很容易的手动创建新入口或修改入口）
执行 `pnpm run dev`，显示：
访问 `http://localhost:8080/`，可以像之前一样看到联系人列表应用。
访问 `http://localhost:8080/landing-page`，可以看到刚创建的新入口 `landing-page` 的页面（Modern.js 自动生成的默认页面）。
## 手动调整应用入口
Modern.js 框架的设计原则之一是【[约定优于配置（Convention over Configuration）](https://en.wikipedia.org/wiki/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`。
:::note 注
`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`：
```bash
mv src/hello-modern src/contacts
```
再次执行 `pnpm run dev`，结果变成：
现在不再有主入口，联系人列表现在是一个普通入口，需要用 `http://localhost:8080/contacts` 访问。
---
> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c07/hello-modern-2)。