跳转到主文档

创建最简单的应用工程

开始创建

1. 创建项目根目录和源代码目录

我们创建名为 hello-modern 的项目:

mkdir -p hello-modern/src
cd hello-modern

接下来都在项目根目录下执行命令。

2. 在 src 目录下,创建 App.jsx

touch src/App.jsx

在 App.jsx 里默认导出一个 React 组件,作为应用的根组件。

src/App.jsx
export default function App() {
return <div>Hello World!</div>;
}

3. 添加框架依赖

在项目根目录下创建 package.json

touch package.json

复制以下内容到文件里:

{
"name": "hello-modern",
"scripts": {},
"dependencies": {
"react": "^17",
"react-dom": "^17",
"@modern-js/runtime": "^1.0.0"
},
"devDependencies": {
"@modern-js/app-tools": "^1.0.0"
}
}

4. 添加框架命令

添加本章节要用的 3 个命令到 package.json 的 npm scripts 里:

"scripts": {
"dev": "modern dev",
"build": "modern build",
"start": "modern start"
},

创建完成

一个基于 Modern.js 框架的应用工程,到这里就已经创建完成了。

目录结构如下:

.
├── src/
│ └── App.jsx
└── package.json

可以看到,由于 Modern.js 框架的默认零配置、约定优于配置、开箱即用、避免样板文件、Universal App 等设计,即使不借助任何脚手架、生成器、项目模板等工具,纯手动搭建一个项目,整个过程也是极其简单的。

安装依赖

pnpm install