社区插件
Farm 支持开箱即用的“Vite/Rollup”插件。 所以 Vite/Rollup
或者 unplugin
插件可以直接在 Farm 中使用。
提示
如果您开发了兼容 Farm 的插件并且想在此处列出,欢迎 PR。
目前测试兼容的Vite/Rollup/unplugin
插件如下 :
Vite/Rollup Plugins
使用 farm.config.ts
中的 vitePlugins
来配置 Vite/Rollup
插件。
import { UserConfig } from '@farmfe/core';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
const config: UserConfig = {
vitePlugins: [
vue(),
vueJsx(),
]
}
@vitejs/plugin-vue
: Vue 支持.@vitejs/plugin-vue-jsx
: Vue Jsx/Tsx 支持.vite-plugin-solid
: Solid 支持vite-plugin-mock
: Mock 数据.- ...
unplugin
备注
目前,您可以在 Farm 中使用“unplugin/vite”进行“unplugin/rollup”。 当此 PR 合并到 unplugin 时,unplugin/farm
将可用。
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/rollup';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
const config: UserConfig = {
vitePlugins: [
Icons({
compiler: 'vue3',
customCollections: {
[collectionName]: FileSystemIconLoader(localIconPath, svg =>
svg.replace(/^<svg\s/, '<svg width="1em" height="1em" ')
)
},
scale: 1,
defaultClass: 'inline-block'
}),
Components({
dts: 'src/typings/components.d.ts',
types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
resolvers: [
NaiveUiResolver(),
IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFIX })
]
})
]
}
Farm 支持所有 unplugin 插件:
- unplugin-auto-import
- unplugin-vue2-script-setup
- unplugin-icons
- unplugin-vue-components
- unplugin-upload-cdn
- unplugin-web-ext
- unplugin-properties
- unplugin-moment-to-dayjs
- unplugin-object-3d
- unplugin-parcel-css
- unplugin-vue
- unplugin-vue-macros
- unplugin-vue-define-options
- unplugin-jsx-string
- unplugin-ast
- unplugin-element-plus
- unplugin-glob
- unplugin-sentry
- unplugin-imagemin
- unplugin-typedotenv
- unplugin-fonts
- sentry-javascript-bundler-plugins
- unplugin-svg-component
- unplugin-vue-cssvars