简介
在前端开发中,经常需要用到一些 CSS 样式库以及 JavaScript 插件等。随着项目的不断增多,每个项目中都会用到各自的样式与插件,因此在维护和升级上都变得十分繁琐。
为了更好的管理和维护这些资源,npm 包 unification 应运而生。unification 可以帮助我们快速搭建出一个干净、统一的前端项目,同时也为我们提供了打包、压缩等一系列工具。
本文将介绍如何使用 npm 包 unification。
安装
使用 npm 安装 unification:
npm install unification --save-dev
配置
在项目根目录下创建一个名为 .unificationrc.js
的 js 文件,进行配置。
-- -------------------- ---- ------- -------------- - - --- - ------ ----------------- ------- - ----- ------------------- ------- ------- -- -- ---- - ------- ------------------ ------- ------------------- -------- --- -- ----- - ------- --------------- ------- -------------------- ------- --- -- --展开代码
在上面的配置文件中,我们可以配置 JavaScript、CSS 和 HTML 文件的输出路径、输入路径和压缩方式等。其中,entry
表示 JavaScript 的入口文件,output.file
表示打包后的文件路径,output.format
表示输出格式。source
表示 CSS 和 HTML 的源文件路径,output
表示输出路径,plugins
表示 CSS 预编译、后处理工具等。
使用
通过命令行工具进行使用:
npx unification
通过上面的命令即可启动 unification。在启动完成后,它会自动将我们的代码打包、压缩后放到 ./dist
目录下。
同时,我们也可以使用 npm 中的 script 命令进行操作:
{ "scripts": { "start": "npx unification", "build": "npx unification && node dist/server.js" } }
通过上面的配置,我们可以使用 npm start
启动 unification,使用 npm run build
打包并启动项目。
示例代码
在这里,我们可以使用 unification 中默认的模板生成一个示例项目:
npx degit unification/template my-app
上面的命令会将 unification 的默认模板复制到 my-app
目录下。
通过 npm install
和 npm start
后即可启动项目。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005587681e8991b448d5b46