使用vite脚手架，体验formily踩坑

今天在看formily，于是想在本地启一个项目来体验一把。

考虑到cra太重了，下载下来得半天，于是乎考虑用vite的脚手架，比较轻量。踩了一些坑，记录一下

创建项目

yarn create vite vite-react-formily --template react-ts

创建这一步比较顺利，没什么问题，能正常启动项目

接入formily

按照formily v2官方文档，直接执行命令，一把嗦！

pnpm install --save @formily/core

pnpm install --save @formily/react

pnpm install --save antd moment @formily/antd

报错了

js 复制代码

[vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/.pnpm/[email protected][email protected]/node_modules/react-sticky-box/dist/es/index.js:3:22: ERROR: Could not resolve "prop-types"
    at failureErrorWithLog (/Users/wenqiongweng/Documents/zaoren-projects/practice/vite-react-formily/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/wenqiongweng/Documents/zaoren-projects/practice/vite-react-formily/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1058:25
    at /Users/wenqiongweng/Documents/zaoren-projects/practice/vite-react-formily/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1525:9
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
error Command failed with exit code 1.

我乍一看，是esbuild在构建的时候失败了，prop-types是不是不兼容es6啊，后来发现事情远比想象的简单。就是没有安装prop-types,因为prop-types在peerDenpendencies里面。

pnpm install prop-types

这个问题是解决了，但是继续报错：

js 复制代码

[plugin:vite:css] [less] '~antd/es/style/themes/index.less' wasn't found. Tried - /Users/.../practice/vite-react-formily/node_modules/.pnpm/@[email protected]_0d18122412ae77aea4037356ef0094e8/node_modules/@formily/antd/esm/form-item/~antd/es/style/themes/index.less,node_modules/~antd/es/style/themes/index.less,npm://~antd/es/style/themes/index.less,~antd/es/style/themes/index.less

应该是在找 ~~antd/es/style/themes/index.less 这个路径的时候，没解析对，我搜了一下，应该是vite的配置问题，没有配置~~该怎么解析

参考链接

js 复制代码

// 修改了 vite.config.js 的配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~/, 
        replacement: '',
      },
      {
        find: '@', 
        replacement: path.resolve(__dirname, './src')
      }
    ],
  }
})

路径的问题是解决了，但是继续报错！

这是个大坑。之前一把嗦，终于遭报应了，我发现antd里面根本没有这个文件！原因是 formily 仅支持antd版本 <4.22.8

issues讨论

其实从 @formily/antd 的 package.json 里面也能看出来，但是官方没说啊！强烈建议官方文档说明一下antd的支持版本！！！

于是，在package.json里把antd的版本限制一下，但是又出现了一个问题:

js 复制代码

[plugin:vite:css] [less] Inline JavaScript is not enabled. Is it set in your options?
/Users/wenqiongweng/Documents/zaoren-projects/practice/vite-react-formily/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/style/color/bezierEasing.less:110:0
107|  // It is hacky way to make this function will be compiled preferentially by less
108|  // resolve error: `ReferenceError: colorPalette is not defined`
109|  // https://github.com/ant-design/ant-motion/issues/44
   |                                                        ^
110|  .bezierEasingMixin();
111|

看起来应该是vite里的less插件某个配置项没开启，我搜了一下，改一下vite.config.ts的配置就行

js 复制代码

css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

搞定了，跑起来了，可以愉快的体验formily了。

总结

虽然说，使用vite的脚手架确实需要自己配置一些东西，但是formily也有点坑啊，首先没有一个完整的最佳实践流程，现在antd5.0已经发行很久了，也没有在官方文档里面说明antd的限制版本，对小白有点不太友好。