本文转载自微信公众号《DYBOY》，作者DYBOY。转载本文请联系DYBOY公众号。随着互联网行业的发展，前端应用逐渐变得复杂，前端工程化开发自然是必经之路。在争名夺利的时代，涌现出许多优秀的施工工具。今天，我想从学习的角度来和大家分享一下。分享作者的学习方法和思路。从笔者个人的角度来看，要想全面掌握前端工程，就必须对行业现有的构建工具、流程管理、服务管理等有全面深入的了解。无论是前端开发人员还是后端开发人员，我们用任何一种编程语言编写软件应用程序都是一项基本能力，但是作为一名工程师，我认为具备工程能力是很有必要的。在开发项目中要有掌控全局的能力，要有业务的眼光，要有技术的沉淀，时刻想着，尽量接近符合的最佳实践方案设计、流程设计、方案设计等业务场景。一、什么是RollupRollup是一个JavaScript模块打包器，可以将小块代码编译成大而复杂的代码，比如库或者应用——Rollup文档可以理解为Rollup是一个集成的代码打包和应用构建工具。2.为什么要使用构建工具前面说了，前端工程是一个工程师必备的能力，工程不是一个人能搞定的。我们需要站在前人/巨人的肩膀上看世界。随着行业的发展，出现了一些行业公认的（可以认为是最佳实践）构建工具，将项目管理和编程开发的一些行业最佳实践整合为一个“脚手架”工具。这样有利于其他团队快速构建高效优质的工程项目。构建工具可以做什么：处理兼容性混乱、压缩代码TreeShaking、翻译单元测试、打包应用程序3.开始使用Rollup让我们看看如何开始。其实关于Rollup的使用建议大家阅读官方文档：https://rollupjs.org/guide/《3.1安装》全局安装rooolupyarnaddrollup-g《3.2简单使用》rollup有两种使用方式打包构建，直接在命令行下，我们需要手动构建必要的参数。当然我们是做工程的，所以要考虑如何尽可能的降低团队成员的上手成本。为此，Rollup提供了文档化的配置方式来预置需要的参数，同时通过更改配置文件的参数，我们可以自由实现自己的定制化需求。这里你可能会想到写一个CLI。工欲善其事，必先利其器。我们必须先了解工具，然后才能创建工具，所以我们不要走得太远。3.2.1创建配置文件在项目根目录或其他你满意的位置创建一个rollup.config.js文件，主要内容如下：exportdefault{input:"./src/index.js"js",output:{file:"./dist/bundle.js",format:"esm",name:"RollupLearn",},}3.2.2为简单起见添加快捷命令，在package.json中配置快捷命令:"scripts":{"building":"rollup-c-w",}，这样就可以在命令行直接执行：yarnbuilding，创建一个实时监控文件变化并自动重建打包的开发环境。3.2.3rollup.config.js配置常用参数解释rollup配置参数官方列表如下：exportdefault{//核心选项input,//必填，打包入口文件，常用index.jsexternal,plugins,//常用：array配置一些打包的插件，比如babel等//额外选项onwarn,//dangerzoneacorn,context,moduleContext,legacyoutput:{//必填（如果要输出多个，可以是数组）//Coreoptionsfile,//Required,生成的打包文件名&路径格式,//必须,打包构建的目标模块标准,包括cjs,amd,umd,esm,iife等name,globals,//附加选项paths,banner,footer,intro,outro,sourcemap,//常用于生成sourcemap文件sourcemapFile,interop,//高危选项exports,amd,indentstrict},};简单说说几个常用的功能设置(1)input(input-i/--input)String这个包的入口点(eg:你的main.jsorapp.jsorindex.js)(2)file(file-o/--output.file)String要写入的文件。如果适用，也可用于生成sourcemaps(3)Format(format-f/--output.format)String生成的包的格式。以下之一：amd–异步模块定义，与RequireJS等模块加载器一起使用cjs–CommonJS，用于Node和Browserify/Webpackesm–将包保存为ES模块文件，通过amd在现代浏览器中可用–模块加载器的异步模块定义，例如RequireJScjs-用于Node和Browserify/Webpack的CommonJSesm-将包保存为ES模块文件，可以在现代浏览器中通过标签。（如果你正在为你的应用程序创建一个包，你可能想使用它，因为它使文件大小很小。）umd-通用模块定义，与amd、cjs和iife系统集成-SystemJS加载器格式(4)来生成包name(name-n/--name)代表你的iife/umd包的字符串变量名，同一页面的其他脚本可以访问它。(5)Plugins（插件）插件对象数组Array（或插件对象）。记得调用导入的插件函数（即commonjs()，不是commonjs）。(6)sourcemap-m/--sourcemap如果为true，将创建一个单独的sourcemap文件。如果内联，源映射将作为数据URI附加到生成的输出文件。(7)sourcemapFileString生成包的位置。如果这是绝对路径，sourcemap中的所有源路径都将相对于它。map.file属性是sourcemapFile的基本名称，因为假定sourcemap的位置与包相邻。如果指定了输出，则不需要sourcemapFile。在这种情况下，将通过添加“.map”后缀来推断输出文件名来添加捆绑输出文件。(8)treeshake是否应用tree-shaking。建议您省略此选项（默认值为treeshake:true）。在我看来，大家需要的时候可以参考官方文档。关于这些参数的详细介绍，请参考：https://rollupjs.org/guide/en/#big-list-of-options，将是解决问题最快的方法。4.增强的打包能力通过Rollup自身提供的上述一些工具，不难发现代码压缩、代码混淆、兼容性处理等能力是没有的，但是Rollup提供了一个名为plugins的配置字段，允许我们使用第三方库来增加汇总构建能力。在一个项目中，常见需要考虑的问题有：代码压缩、代码混淆兼容性处理TypeScript、Less、Sass等翻译处理TreeShaking（Rollup默认支持并启用）泛化（支持打包翻译成umd，cjs、esm等格式包）官方提供了权威的三方插件参考列表：https://github.com/rollup/awesome，所以如果你想提升自己的能力，可以搜索“4.1代码压缩”在此列表中。推荐使用:rollup-plugin-terser安装：yarnaddrollup-plugin-terser-D该插件提供代码压缩，是否保留代码注释多行显示。一般我们全部压缩，去掉代码注释。代码注释在生产环境中是没有用的。所以默认配置terser()。《4.2本地http服务》推荐：rollup-plugin-serve安装：yarnaddrollup-plugin-serve-D一般配置：importservefrom"rollup-plugin-serve";serve({open:true,//运行headers时自动打开浏览器:{"Access-Control-Allow-Origin":"*",//本地服务允许跨域},contentBase:['public'],//本地服务运行文件根目录port:5000,//Settings网络服务监听端口}),"4.3清除生成的目录文件"每次编译时，如果我们有一些历史文件，可能会使我们的生产目录越来越混乱，所以每次编译前都需要清除推荐插件：rollup-plugin-clear一般使用：importclearfrom"rollup-plugin-clear";clear({targets:["dist"],//项目打包编译生成的目录watch:true,//Real-timemonitoringoffilechanges}),《4.4ESlint代码格式检查》ESLint是ECMAScript/中识别和报告模式匹配的工具JavaScript代码。它的目标是确保代码的一致性并避免错误。ESlint可以尽可能规范团队开发的代码风格，并通过静态检查。提高代码质量。不失为一个代码质量管理工具！因为ESlint本身涉及到很多配置，后面会整理或者可以参考官方文档：https://eslint.org/docs/user-guide/getting-started4.4.1安装yarnaddeslint-D4.4.2初始化yarnruneslint--init执行这条命令后，会回答一些问题，然后默认配置一个初始化的ESlint规则配置文件。初始化完成后，在根目录下创建一个ESlint配置文件：.eslintrc.json:{"env":{"browser":true,"es2021":true},"extends":["standard"]"parserOptions":{"ecmaVersion":12,"sourceType":"module"},"rules":{}}这个时候你在编码开发的时候会提示一些语法不符合到规范。同时可以在VScode中提供修复的快捷菜单。对于一些配置文件，生成目录下的文件不需要Eslint检查，所以可以在项目根目录新建一个.eslintignore文件，例如：/dist//public//rollup.config.js当然ESlint规则有很多，你需要ESlint规则的复杂程度根据你自己团队的成员和项目本身的情况来决定。更多配置规则请参考：https://eslint.org/docs/rules/4.4.3配置Rollup支持ESlint虽然我们在编码过程中会检查代码是否符合ESlint自定义的规则，但我们仍然可以通过Rollup打包成功。由于ESlint规则在rollup中是感知不到的，所以必须在Rollup配置文件中配置相关设置。需要安装：rollup-plugin-eslintyarnaddrollup-plugin-eslint-D配置：import{eslint}from"rollup-plugin-eslint";eslint();//这里没有传入配置参数，根目录为该文件将自动加载.eslintrc.json配置文件。4.4.4VScode配置一般大家都用VScode写前端项目，所以在团队项目中，也可以配置一个VScode工作区配置，这样大家一起工作的时候可以统一一些行为，比如ESlint保存代码的时候自动修复和自动格式化，将不一致的风险降到最低。提高团队开发效率的好处也非常明显。当然，还要根据情况配置合适的代码规范约束。《4.5CSSPreprocessorPlugins》常见的CSS预处理器插件包括：SCSS、SASS、LESS。以Less处理器为例，我们需要安装：rollup-plugin-lessyarnaddrollup-plugin-less-D使用示例：import{rollup}from'rollup';importlessfrom'rollup-plugin-less';rollup({entry:'main.js'，插件：[less()]});那么在打包编译的时候就可以把less文件翻译成css了。《4.6MorePlugins》其实有很多插件。它们的用法如上一节中所列。可以看出，Rollup的使用和上手成本都比较低。它的Tree-shaking是一大亮点，react框架用rollup打包，Rollup小而美，团队项目作为构建工具是不错的选择！作者暂时无法给出最佳实践的Rollup插件配置。工程项目比较复杂，剩下的就需要大家根据项目和团队自身情况去思考和制定了。5.小结Rollup打包工具的基本使用大同小异。试用之后发现Rollup的配置非常简单，改变了开发者的工作形式，提高了工作（编码）效率。当然，我不知道为什么；我可以得到同样的东西，但我不知道为什么。”作为前端工程师，我们不仅要知道如何使用它，还要了解构建的全过程，这有助于我们在编码和架构设计上更加合理或“自然”。
