在前端开发中，经常需要使用不同的构建工具来处理源代码，例如编译、压缩、打包等等。Npm 是前端开发中经常使用的包管理工具，而 silly-builder 是专门用来帮助我们构建前端应用的 npm 包。
什么是 silly-builder？
silly-builder 是一个基于 webpack 的构建工具，提供了许多配置项，能够灵活地定制我们的构建流程。它支持打包 js、css、图片等资源，并且可以自动给文件名添加哈希值，方便做版本管理。
安装和使用
安装最新版本：
npm i silly-builder --save-dev
在项目根目录下创建一个名为 silly-config.js 的文件。在这个文件中，我们可以配置构建的入口文件、输出路径、静态资源路径、模块解析等等。详细的配置项可以在官方文档中查看。
-- -------------------- ---- ------- ----- ---- - --------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ------------ ----------- ---- -- -------- - ----------- ------- ------- --------- ------ - ---- ----------------------- ------ - -- ------- - ------ - - ----- --------- ---- --------------- -------- --------------- -- - ----- ---------------------- ---- - - ------- ------------- -------- - ------ ----- ----- ------------------------ ----------- ---------------- -- -- -- -- - ----- ---------- ---- ---------------- ------------- --------------- -- - -- -展开代码
在 package.json 中设置 scripts：
{ "scripts": { "start": "silly-builder serve", "build": "silly-builder build" } }
现在，我们可以在终端使用以下命令启动本地服务器：
npm start在开发过程中，我们可以在 /src 目录下创建源文件并在其中进行开发。当我们使用 npm start 命令时，silly-builder 会自动编译我们的代码，并且在浏览器中打开一个本地服务器。
当我们的代码准备好发布时，可以使用以下命令打包：
npm run build这将自动把代码打包到 /dist 目录下，其中包括了所有需要的文件和资源。
小结
silly-builder 简化了项目构建的流程，让我们可以更加专注于代码的编写和逻辑的实现。在使用过程中，需要根据自己的需求去适配一些配置项，以达到最优的效果。
示例代码
在这里，我们提供一段示例代码，基于 silly-builder 构建了一个简单的 TodoList 应用。
-- -------------------- ---- ------- ------ ------ - -------- - ---- ------- ------ - ------ - ---- ----------- ------ -------------- -------- ----- - ----- ------ -------- - ------------ ----- ------------ -------------- - ------------ -------- --------------- - ------------------------------------ - -------- ----------- - -- ------------- - ------ - -------------------------------- ----------------- - -------- ------------------- - ----------------------- -- -- - --- ------- - ------ - ---- ---------------- -------- --------- ---- -------------------------- ------ ----------- ------------------ ------------- ------------------ ----------------------- -- ------- -------------------------------- ------ ---- ---------------- ------ -- - --- ------------ ------ ------- ----------- -- ------------------------------------ ----- --- ----- ------ - - ----------- --- --------------------------------展开代码
其中，style.less 文件是一个使用了 less 的 css 文件：
-- -------------------- ---- ------- --------------- -------- ---- - ------ ------ ------- - ----- -------- ----- ------- --- ----- ----- -------------- ---- ----------------- ----- ----------- - --- ---- ------- -- -- ---- - ---------------- - ------ ---- -------- --- ----- ------- --- ----- ----- -------------- ---- - ------ - ------ ---- ------------ --- -------- --- ----- ----------------- --------------- ------ ----- ------- ----- -------------- ---- ------- -------- - -- - ----------- ----- - -- - ------- ---- -- -------- --- ----- -------------- ---- ----------------- -------- ----------- ----- -------- ----- ------------ ------- ---------------- -------------- ----------- - --- --- ------- -- -- ---- - -- ------ - ------ ---- -------- --- ---- ----------------- -------- -展开代码
上面的代码中，我们在 js 中引入了 less 文件，并且通过 silly-builder 的配置项进行了编译和打包。在运行 npm run build 后，less 文件中的样式将被编译成 css 并且和 js 文件一起被打包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76048
