1. 创建一个项目
在本章中，我们将从头开始创建一个新的 Farm React 项目，并以开发模式启动它。
备注
在本教程中，我们使用pnpm作为默认包管理器。 本章是从头开始构建 Farm React 项目，如果您想快速启动一个新的 Farm 项目，请使用我们的官方模板和命令pnpm create farm。
创建一个 Npm 包
首先我们执行pnpm init 来创建一个新包。
mkdir farm-react && cd farm-react && pnpm init
将自动生成package.json文件。
安装依赖项
安装必要的依赖项(react 以及 react-dom:)：
pnpm add react react-dom && pnpm add react-refresh @types/react @types/react-dom -D
然后安装 Farm 相关依赖:
pnpm add -D @farmfe/cli @farmfe/core @farmfe/plugin-react
React 项目需要 3 个包：
@farmfe/cli：该包提供了farm start、farm build、farm Preview等命令，必须与@farmfe/core一起使用，不能单独使用。@farmfe/core：该软件包提供编译和Dev Server，为本地开发和产品构建提供所有必要的组件。 它导出Compiler，DevServer和Watcher，用于编译项目，以开发模式服务项目和监视项目的热模块替换。@farmfe/plugin-react：此包提供 React Jsx 编译和 React-refresh 支持。
创建 Farm 配置文件
在项目根目录下创建一个farm.config.ts文件：
.
├── farm.config.ts
├── package.json
└── pnpm-lock.yaml
并添加以下配置：
import { UserConfig } from '@farmfe/core';
function defineConfig(config: UserConfig): UserConfig {
return config;
}
export default defineConfig({
compilation: {
input: {
index: './src/index.html'
},
output: {
path: 'build',
publicPath: '/',
targetEnv: 'browser'
}
},
plugins: [
'@farmfe/plugin-react',
]
});
对于上面的配 置文件，我们使用了input、output和plugins，这是Farm中最基本的配置。
input：配置入口点。 Farm 将根据条目编译并构建模块图。输出：配置输出目录、文件名等。 有关完整选项，请参阅 compilation.output。plugins：配置farm插件，React、Vue SFC等所有扩展能力均由插件支持。 这里我们使用一个 Rust 插件（@farmfe/plugin-react）来支持编译 React jsx。
查阅配置参考以获取更多选项。
备注
在上面的例子中，我们将 input 配置为 index: './src/index.html'，如果我们不配置 input，则默认为 index: './index.html'。 并且我们可以在input中配置多个条目，详细信息请参见多页面应用
创建一个入口Html和Js
在项目根目录下创建 2 个文件 src/index.html 和 src/index.tsx：
.
├── farm.config.ts
├── package.json
├── pnpm-lock.yaml
└── src
├── index.html
└── index.tsx
src/index.html 的内容是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- we must use script to make ./index.tsx as a dependency -->
<script src="./index.tsx"></script>
</body>
</html>
备注
请注意，我们必须添加至少一个<script>来引用脚本模块。
src/index.tsx 的内容是：
src/index.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.querySelector('#root');
const root = createRoot(container);
root.render(<div>A React Page compiled by Farm</div>);
Start Your Farm Project!
现在一切都准备好了，将启动脚本添加到您的package.json中：
package.json
{
"name": "1-create-a-project",
"version": "1.0.0",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "farm start"
},
// ... ignore other fields
}
然后运行npm start，如果 Farm 输出以下消息，则意味着您的项目已成功启动：
$ npm start
> 1-create-a-project@1.0.0 start
> farm start
[ Farm ] Using config file at /home/tutorials/1-create-a-project/farm.config.ts
ϟ Farm v0.16.0
✓ Ready in 20ms ⚡️ FULL EXTREME !
[ Farm ] > Local: http://localhost:9000/
[ Farm ] > Network: http://192.168.1.3:9000/
在浏览器中打开http://localhost:9000。
