RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
前端工程化之Rollup构建工具

本文转载自微信公众号「DYBOY」，作者DYBOY。转载本文请联系DYBOY公众号。

我们提供的服务有：成都做网站、成都网站制作、微信公众号开发、网站优化、网站认证、德兴ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的德兴网站制作公司

随着互联网行业的发展，前端应用也逐渐变得复杂，所以自然而然地前端工程化开发是必然道路，百家争名的时代，涌现了许多优秀的构建工具，今天想从学习的角度，和大家分享一下笔者的学习方法和思路。

笔者个人观点看来，想要完全掌握前端工程化，那么就得对行业现有的构建工具、流程管理、服务管理有一个全面以及深入的认识，无论是前端还是后端开发者，我们通过任意编程语言编写软件应用，这是基本能力，但作为工程师，我想那就是得具有工程化的能力，我们应该在开发工程中能够具有把控全局的能力，有业务上的视野，也得有技术上的沉淀，应该时刻思考，从程序设计、流程设计、方案设计上尽可能得去逼近符合业务场景的最佳实践。

一、什么是Rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序 —— Rollup文档

可以理解为，Rollup是一款集成式的代码打包、应用构建工具。

二、为什么要使用构建工具

如前文所述，前端工程化是作为工程师的必要能力，工程化并非一个人就能搞定的，我们需要站在前人/巨人的肩膀看世界。

随着行业的发展，涌现了一些获得行业认可(可以认为是最佳实践)的构建工具，这些构建工具将一些项目管理和编程开发的行业最佳实践集成到了一个“脚手架”工具中。如此，便有利于其他团队快速构建出高效、高质量的工程化项目。

构建工具能做的事：

  • 处理兼容性
  • 混淆、压缩代码
  • Tree Shaking
  • 转译
  • 单元测试
  • 打包应用

三、上手Rollup

Rollup是一个我认为还比较简单的构建工具，此处先不去讨论其深层次的构建实现细节，先看看如何上手使用。

其实关于Rollup的使用还是比较推荐大家阅读官方文档：https://rollupjs.org/guide/

「3.1 安装」

全局安装roolup

 
 
 
 
    
  
  
  
  
  1. yarn add rollup -g 
    2.

「3.2 简单使用」

使用rollup打包构建有两种方式，直接在命令行下需要手打构建必须的参数，当然我们是做工程，那么就得考虑如何尽可能减少团队成员的上手成本。

为此，Rollup提供了通过文件化配置方式，预设所需的参数，同时通过更改配置文件的参数，可以自由地实现我们自定义的需求。

这里大家可能会想到写一个CLI，工欲善其事必先利其器，咱先认识工具才能造工具，就先不扯远了。

3.2.1 创建配置文件

在项目的根目录或其他你满意的位置创建一个 rollup.config.js 文件，其内容主要如下：

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.     input: "./src/index.js", 
    3. 
  
  
  
  
  3.     output: { 
    4. 
  
  
  
  
  4.         file: "./dist/bundle.js", 
    5. 
  
  
  
  
  5.         format: "esm", 
    6. 
  
  
  
  
  6.         name: "RollupLearn", 
    7. 
  
  
  
  
  7.     }, 
    8. 
  
  
  
  
  8. } 
    9.

3.2.2 添加快捷命令

为了简单，另外再在package.json中配置快捷命令：

 
 
 
 
    
  
  
  
  
  1. "scripts": { 
    2. 
  
  
  
  
  2.     "building": "rollup -c -w", 
    3. 
  
  
  
  
  3. }, 
    4.

这样就可以直接在命令行下通过执行：yarn building，就创建了一个实时监听文件变化就自动重新构建打包的开发环境。

3.2.3 rollup.config.js配置常用参数解读

官方罗列了rollup的配置参数如下：

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.   // 核心选项 
    3. 
  
  
  
  
  3.   input,     // 必须，打包的入口文件，常见index.js 
    4. 
  
  
  
  
  4.   external, 
    5. 
  
  
  
  
  5.   plugins,  // 常用：数组中配置一些打包的插件，例如babel等 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   // 额外选项 
    8. 
  
  
  
  
  8.   onwarn, 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.   // danger zone 
    11. 
  
  
  
  
  11.   acorn, 
    12. 
  
  
  
  
  12.   context, 
    13. 
  
  
  
  
  13.   moduleContext, 
    14. 
  
  
  
  
  14.   legacy 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.   output: {  // 必须 (如果要输出多个，可以是一个数组) 
    17. 
  
  
  
  
  17.     // 核心选项 
    18. 
  
  
  
  
  18.     file,    // 必须，生成的打包文件名&路径 
    19. 
  
  
  
  
  19.     format,  // 必须，打包构建的目标模块标准，有cjs、amd、umd、esm、iife等 
    20. 
  
  
  
  
  20.     name, 
    21. 
  
  
  
  
  21.     globals, 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23.     // 额外选项 
    24. 
  
  
  
  
  24.     paths, 
    25. 
  
  
  
  
  25.     banner, 
    26. 
  
  
  
  
  26.     footer, 
    27. 
  
  
  
  
  27.     intro, 
    28. 
  
  
  
  
  28.     outro, 
    29. 
  
  
  
  
  29.     sourcemap,  // 常用，生成sourcemap文件 
    30. 
  
  
  
  
  30.     sourcemapFile, 
    31. 
  
  
  
  
  31.     interop, 
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33.     // 高危选项 
    34. 
  
  
  
  
  34.     exports, 
    35. 
  
  
  
  
  35.     amd, 
    36. 
  
  
  
  
  36.     indent 
    37. 
  
  
  
  
  37.     strict 
    38. 
  
  
  
  
  38.   }, 
    39. 
  
  
  
  
  39. }; 
    40.

简单讲一下几个常用的功能设置

(1)输入(input -i / --input)

String 这个包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js)

(2)文件(file -o / --output.file)

String 要写入的文件。也可用于生成 sourcemaps，如果适用

(3)格式(format -f / --output.format)

String 生成包的格式。下列之一:

  • amd – 异步模块定义，用于像RequireJS这样的模块加载器
  • cjs – CommonJS，适用于 Node 和 Browserify/Webpack
  • esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过  
  • amd – 异步模块定义，用于像RequireJS这样的模块加载器
  • cjs – CommonJS，适用于 Node 和 Browserify/Webpack
  • esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过
    0.0766s