Wrollup 是一个轻量级的 JavaScript 模块打包器，针对现代浏览器和 Node.js 进行了优化。它可以将多个模块打包成一个单独的文件，以便于部署和优化网站性能。本文将介绍如何使用 Wrollup，以及其深度和指导意义。
安装 Wrollup
在使用 Wrollup 之前，需要先安装 Node.js，然后使用以下命令安装 Wrollup：
npm install rollup --global
使用 Wrollup
首先，我们需要在项目中创建一个 config 文件，该文件用于配置打包程序的行为。下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- ---------------------
------ ------ ---- ----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
---------
--
-该配置文件使用了两个插件：babel 和 uglify。babel 插件用于将 ES6/7 的 JavaScript 代码转换为 ES5，以便于在旧版本的浏览器中运行。uglify 插件用于压缩 JavaScript 代码，以减小文件大小并提高网页性能。
在上面的配置文件中，input 属性指定了项目的入口文件，output 属性指定了生成的打包文件的名称和格式。在本例中，打包程序将把所有的模块打包成一个单独的 CommonJS 模块，并输出到 dist/bundle.js 文件中。
接下来，在项目的根目录下运行以下命令：
rollup -c
该命令将会读取配置文件，并执行打包程序。打包完成后，会生成一个名为 bundle.js 的文件，其中包含了所有的 JavaScript 代码和依赖项。
深度和指导意义
Wrollup 是一个非常灵活和高度可定制的打包器，可以帮助开发者更好地管理项目的依赖项和模块。使用 Wrollup 可以：
- 去掉模块间的重复代码，减小打包后的文件的体积和加载时间；
- 将多个模块合并成一个单独的文件，以减少网络请求的次数；
- 在打包过程中进行代码优化，以提高网页性能；
- 支持多种模块格式，如 ES6 模块、CommonJS 模块、AMD 模块等；
- 支持各种开发语言和框架，如 React、Vue、AngularJS 等。
通过学习 Wrollup，开发者可以更好地理解 JavaScript 模块的工作原理，以及如何优化网页性能，并可以应用这些知识到实际的项目中进行开发和部署。
示例代码
以下是一个简单的示例代码，展示了如何使用 Wrollup 进行打包：
-- -------------------- ---- ------- -- ------------ ------ - --- - ---- -------- -------------- - - --- ------ --- -- ----------- ------ -------- ------ -- - ------ - - - -
-- -------------------- ---- -------
-- ----------------
------ ----- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
--
-运行 rollup -c 命令后，将会生成一个名为 dist/bundle.js 的文件，其包含了 src/index.js 和 src/math.js 模块的代码。在 dist/bundle.js 文件中，模块间的重复代码已经被去掉，以减少文件大小和加载时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671148dd3466f61ffe5a3