1. 创建一个项目

在本章中，我们将从头开始创建一个新的 Farm React 项目，并以开发模式启动它。

备注

在本教程中，我们使用 pnpm 作为默认包管理器。本章将 从头开始构建 Farm React 项目，如果您想快速启动一个新的 Farm 项目，请使用我们的官方模板和命令 pnpm create farm。

创建一个 Npm 包

首先我们执行pnpm init来创建一个新包。

将自动生成package.json文件。

安装必要的依赖项(react 以及 react-dom:)：

然后安装 Farm 相关依赖:

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.config.ts文件：

并添加以下配置：

对于上面的配置文件，我们使用了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中配置多个条目，详细信息请参见多页面应用

在项目根目录下创建 2 个文件 src/index.html 和 src/index.tsx：

src/index.html 的内容是：

备注

请注意，我们必须添加至少一个<script>来引用脚本模块。

src/index.tsx 的内容是：

src/index.tsx

现在一切都准备好了，将启动脚本添加到您的package.json中：

package.json

然后运行npm start，如果 Farm 输出以下消息，则意味着您的项目已成功启动：

在浏览器中打开http://localhost:9000。