在 Fomantic-UI(原 Semantic-UI) 中通过编译去除 emoji 组件
原来的 Semantic-UI 已经基本不怎么维护了,现在社区重新改名维护了一套 Fomantic-UI,东西还都是一样的。
最近新增了一个 emoji 组件,导致整体打包的 css 文件体积变大,但是平时可能几乎用不到,以下是寻找了一下去除的方法,也同样适用于需要定制组件打包的情况:
1、根据官方文档:https://fomantic-ui.com/introduction/build-tools.html#30-second-explanation
需要先下载 Fomantic-UI 的完整源代码,并且在本地环境有安装 gulp 工具
2、先进行一次 npx gulp build,会发现在根目录下生成有 semantic.json,或者直接将 semantic.json.example 文件改为 semantic.json 来进行配置
3、根据官方文档:https://fomantic-ui.com/introduction/build-tools.html#semanticjson
在此文件中可以对打包的组件进行配置,以下是移除 emoji 的配置列表:
{
"base": "",
"paths": {
"source": {
"config" : "src/theme.config",
"definitions" : "src/definitions/",
"site" : "src/site/",
"themes" : "src/themes/"
},
"output": {
"packaged" : "dist/",
"uncompressed" : "dist/components/",
"compressed" : "dist/components/",
"themes" : "dist/themes/"
},
"clean" : "dist/"
},
"individuals": [
"emoji"
],
"permission" : false,
"autoInstall": false,
"rtl": false
}
4、将配置文件中最后的 individuals 中配置 emoji 组件,这样重新 build 时,就会单独打包 emoji 组件了,在 dist 中获取到新的文件。
输了你,赢了世界又如何...