用 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.tsx
(pnpm run new
命令只做了这些事,所以你也可以很容易的手动创建新入口或修改入口)
执行 pnpm run dev
,显示:
访问 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
,就认为这个应用工程是单入口的,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
,结果变成:
现在不再有主入口,联系人列表现在是一个普通入口,需要用 http://localhost:8080/contacts
访问。
本小节的代码可以在这里查看。