从语义UI构建中删除未使用的模块/组件

Remove unused modules/components from Semantic UI build

本文关键字：模块 组件 未使用 删除 语义 UI 构建      更新时间：2023-09-26

经过长时间的搜索，我没有找到任何适合当前语义UI 2.0的解决方案。

问题是:如何从JS/CSS构建中删除未使用的组件和模块?我用了大约1/4的功能，有什么简单的方法可以减小文件大小吗?添加/删除语义项的方式。Json似乎不再工作了。

谢谢,H.G.

这可以在Semantic UI的安装过程中完成。你读过《安装语义UI》吗?

这里描述您将执行

npm install semantic-ui --save

启动安装脚本

系统将询问您想要运行哪种类型的设置(自动、快速、自定义)。如果你选择"Custom"，系统会提示你安装Semantic UI的组件。

当然，这意味着您必须事先知道在开发过程中将使用哪些组件。我选择了完全安装Semantic UI的方式，并再次重新运行安装过程，现在剥离要安装的组件，一旦项目准备好发布。

亲切的问候,Sascha .

如何自定义组件:

  • 编辑语义。json文件微调组件列表。如果你选择默认安装，安装所有组件，在这个json文件中不会有组件部分，而你可以自由地手动添加它。

  • 进入semantic目录(默认为project_root/semantic)，并运行两个gulp命令:

    1. gulp clean
    2. gulp build

然后用最新的组件列表重建语义。下面是一个参考示例:

    {
      "base": "semantic/",
      "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/"
      },
      "permission": false,
      "autoInstall": false,
      "rtl": false,
      "components": [
        "reset",
        "site",
        "button",
        "container",
        "divider",
        "header",
        "icon",
        "image",
        "input",
        "label",
        "segment",
        "form",
        "grid",
        "menu",
        "message",
        "dropdown",
        "transition"
      ],
      "version": "2.2.4"
    }
相关文章：