Farm的初步使用

前言

Farm是一个基于Rust的前端代码构建工具

性能优先：一切都会用 Rust 编写，只有少数不是性能瓶颈的部分会用 JS 编写。
一致性有限：默认情况下确保开发和生产完全相同，您在开发中看到的将与您在生产中得到的相同。
局部打包：Farm 的打包目标不是将所有东西打包在一起，而是限制资源的请求数量。 Farm会根据依赖关系和资源大小将您的项目捆绑成20-30个小资源，在不损失缓存粒度的情况下获得最佳的资源加载性能。
所有资源视为一等公民 ：Farm 不再需要将所有内容转换为 Javascript，它将任何内容视为一等公民，如 html、js/jsx/ts/tsx、css/scss、png/svg/...都是Farm支持的基础模块，更多类型的模块可以通过插件支持。
兼容性：Farm 将适用于旧版 (ES5) 和现代浏览器。
Rollup 风格的插件系统：轻松创建自己的插件，并轻松从rollup/vite/webpack 迁移您的插件/项目。

基础使用

一、配置基础依赖

使用官方CLI工具生成模板: pnpm create farm
手动创建(这里我用pnpm创建React做示例):

pnpm init初始化package.json文件
安装必要的依赖项(react 以及 react-dom:)：

fish 复制代码

pnpm add react react-dom && pnpm add react-refresh -D

安装 Farm 相关依赖:

fish 复制代码

pnpm add -D @farmfe/cli @farmfe/core @farmfe/plugin-react

然后修改package.json脚本配置, 设置项目启动和打包命令

json 复制代码

  "scripts": {
    "start": "farm start",
    "build": "farm build"
  },

二、配置Farm配置文件

在项目根目录新建文件 farm.config.js

js 复制代码

const path = require('path')
const process = require('process')

module.exports = {
    compilation: {
        resolve: {
            // 配置路径别名
            alias: {
                '@': path.join(process.cwd(), 'src')
            }
        },
        input: {
            // 入口加载文件路径
            index: './src/index.html'
        },
        output: {
            // 如果不配置filname, 打包后所有文件都在dist目录下, 这样配置会在dist目录下生成static目录
            filename: 'static/[resourceName].[ext]',
            path: './dist'
        }
    },
    server: {
        port: 8081 // 监听端口
    },
    plugins: ['@farmfe/plugin-react']
}

三、添加入口html和js

fish 复制代码

.
├── farm.config.js
├── package.json
├── pnpm-lock.yaml
└── src
    ├── index.html
    └── main.jsx

index.html

html 复制代码

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Learn-farm</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./main.jsx"></script>
    </body>
</html>

main.jsx

jsx 复制代码

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>)

接着终端运行 pnpm start

四、配置Ant Design

antd需要Sass支持需要安装插件

fish 复制代码

pnpm add antd && pnpm add @farmfe/plugin-sass -D

在 farm.config.js 中添加 @farmfe/plugin-sass 插件

js 复制代码

plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass']

在main.jsx中引入antd组件测试

jsx 复制代码

import React from 'react'
import { createRoot } from 'react-dom/client'
import { Button } from 'antd'

const container = document.querySelector('#root')
const root = createRoot(container)

root.render(
    <div>
        <Button type='primary'>测试</Button>
    </div>
)

效果

五、配置tailwindcss

下载相关依赖, 这里使用postcss配置

fish 复制代码

pnpm add @farmfe/js-plugin-postcss tailwindcss -D

在 farm.config.js 中添加 @farmfe/js-plugin-postcss postcss插件

js 复制代码

const postcss = require('@farmfe/js-plugin-postcss')

...

plugins: ['@farmfe/plugin-react', '@farmfe/plugin-sass', postcss()]

在根目录添加 postcss.config.js 和 tailwind.config.js

postcss.config.js

js 复制代码

module.exports = {
    plugins: {
        tailwindcss: {}
    }
}

tailwind.config.js

js 复制代码

module.exports = {
    content: ['./src/**/*.{html,js,jsx}'],
    theme: {
        extend: {}
    },
    plugins: []
}

将 Tailwind 指令添加到全局CSS

css 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.jsx 中引入全局CSS

jsx 复制代码

import React from 'react'
import { createRoot } from 'react-dom/client'

import '@/assets/css/common.css'

const container = document.querySelector('#root')
const root = createRoot(container)

root.render(<div className='w-[500px] h-[500px] m-auto bg-[yellowgreen]'></div>)

效果