简介
在前端领域中，我们经常会使用构建工具来自动化我们的工作流，其中很重要的一步就是将我们开发时编写的高级语言（如 ES6、Typescript）转化为浏览器能够运行的低级语言（如 ES5）。在这个过程中，很多开发工具帮助我们自动完成这个繁琐的工作，使我们的开发效率得到了显著的提高。pundle-dev 就是其中的一种。
pundle-dev 是一个快速的、灵活的打包器，它使用了如 webpack 和 rollup 等打包工具的一些机制，同时又避免了这些工具的一些缺点。pundle-dev 基于 pundle-core，也是其中的一种 renderer，可以通过配置自定义打包规则，使得它更加灵活。
在这篇文章中，我们将会学习如何使用 pundle-dev 来完成前端项目的打包。
安装
使用 npm 安装 pundle-dev：
npm install pundle-dev -D
安装完成后，在 package.json 中添加如下代码段：
-- -------------------- ---- -------
-
---------- -
-------- -------------
-------- ----------- ------
--
------------ -
---
-
-上述代码中，".pundlerc" 是我们配置文件的文件名，在后面的章节中会继续介绍。
配置
我们在 ".pundlerc" 中添加如下代码段：
{
"input": "src/index.js",
"output": "dist/main.js"
}上述代码中，input 属性是我们项目的入口文件，output 属性是我们打包后的文件。
我们同样可以在 ".pundlerc" 中添加其他配置选项来控制打包结果。在这里我们提供一个完整的配置文件：
-- -------------------- ---- -------
-
-------- ---------------
--------- ---------------
------- -----------
------ -----
--------- -----
------------ -------- ------
------ -
------- -----
--------- ------------
--
---------- -
------------ -
-------- -
---------- ---------------------
-
-
-
-上述代码中，熟悉 webpack 的朋友应该可以快速了解。
- name：打包后的模块名称。如果省略，则使用输入文件名。
- map：是否生成 sourcemap。
- source：是否生成 source code。
- externals：在使用浏览器等环境时，可以通过 externals 避免将某些库打入包中，减小包的大小，加速加载速度。
- hot：热更新配置。在开发模式下，文件发生改变后，不需要重新打包，只需要更新浏览器中的代码即可实时查看到修改后的效果。
- modules：内部模块系统的配置。我们可以配置使用哪些工具来处理我们的模块，例如这里使用了 babel 来进行 ES6 转化。
使用
开发模式
在 package.json 中添加如下代码段：
{
"scripts": {
"start": "pundle-dev"
}
}然后运行：
npm start
即可进入开发模式。
在开发模式中，pundle-dev 会在内存中构建你的项目，并且监视你的代码变化。一旦检测到改变，它会立即重新构建你的项目，并使用热部署技术实时更新你的浏览器中的代码。这样就可以节省好多时间啦！
生产模式
在 package.json 中添加如下代码段：
{
"scripts": {
"build": "pundle-dev build"
}
}然后运行：
npm run build
即可构建你的项目。构建的文件会保存在 "output" 文件路径中。
总结
本文我们介绍了 pundle-dev 的使用方法和配置，希望能够帮助大家更好地使用这个工具，提高开发效率。当然，如果读者还希望了解更多深入的内容，可以前往 pundle-dev 的官方文档进行详细了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f01dce4403f2923b035bcf1