在 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 中获取到新的文件。

posted @ 2021-01-21 18:53  不是豆豆  阅读(315)  评论(0编辑  收藏  举报
友情链接:迷途