跳到主要内容
版本:1.0.0

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 startfarm buildfarm Preview等命令,必须与@farmfe/core一起使用,不能单独使用。
  • @farmfe/core:该软件包提供编译Dev Server,为本地开发和产品构建提供所有必要的组件。 它导出CompilerDevServerWatcher,用于编译项目以开发模式服务项目监视项目的热模块替换
  • @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',
]
});

对于上面的配置文件,我们使用了inputoutputplugins,这是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.htmlsrc/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>);

启动 Farm 项目!

现在一切都准备好了,将启动脚本添加到您的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

Extremely Fast Web Build Tool Written in Rust

Copyright © 2024 Farm Community. Built with Docusaurus.