rerumaccusamus

--- title: 创建最简单的 MWA --- ## 开始创建 ### 1. 创建项目根目录和源代码目录我们创建名为 `hello-modern` 的项目： ```bash mkdir -p hello-modern/src cd hello-modern ``` 接下来都在项目根目录下执行命令。 ### 2. 在 src 目录下，创建 App.jsx import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; <Tabs> <TabItem value="macOS" label="macOS" default> ```bash touch src/App.jsx ``` </TabItem> <TabItem value="Windows" label="Windows" > ```bash ni src/App.jsx ``` </TabItem> </Tabs> 在 App.jsx 里默认导出一个 React 组件，作为应用的根组件。 ```js title="src/App.jsx" export default function App() { return <div>Hello World!</div>; } ``` ### 3. 添加框架依赖在项目根目录下创建 `package.json`： <Tabs> <TabItem value="macOS" label="macOS" default> ```bash touch package.json ``` </TabItem> <TabItem value="Windows" label="Windows"> ```bash ni package.json ``` </TabItem> </Tabs> 复制以下内容到文件里： ```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 里： ```json "scripts": { "dev": "modern dev", "build": "modern build", "start": "modern start" }, ``` ## 创建完成一个基于 Modern.js 框架的 MWA 项目，到这里就已经创建完成了。目录结构如下： ```md . ├── src/ │ └── App.jsx └── package.json ``` 可以看到，由于 Modern.js 框架的**默认零配置、约定优于配置、开箱即用、避免样板文件、Universal App** 等设计，即使不借助任何脚手架、生成器、项目模板等工具，纯手动搭建一个项目，整个过程也是极其简单的。 ## 安装依赖 ```bash pnpm install ```