跳转到主文档

创建最简单的应用工程

开始创建​

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": {
  "new": "modern new",
  "dev": "modern dev",
  "build": "modern build",
  "start": "modern start"
},

创建完成​

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

目录结构如下：

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

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

安装依赖​

pnpm install