前言之所以写rollup文章是因为作者最近想规范前端开发的业务流程和架构，提供内部公共组件库和工具库供团队使用。在查阅了很多资料，对比了webpack和rollup的优缺点后，我们最终选择了rollup作为打包工具。我们最终想通过npm安装我们的组件库和工具库：//Installnpminstall@xuxi/tools//使用import{sleep}from'@xuxi/tools'让我们一步步回顾rollup配置过程和最佳实践。rollup简介Rollup是JavaScript的模块打包器，它可以将小块代码编译成更大更复杂的东西，例如库或应用程序。它使用JavaScriptES6修订版中包含的代码模块的新标准化格式，而不是以前的特殊解决方案，如CommonJS和AMD。粗略地说，Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂代码，例如库或应用程序。Rollup使用新的标准化代码模块格式，包含在ES6版本的JavaScript中，而不是像CommonJS和AMD这样的特殊解决方案。rollup最大的亮点是Tree-shaking，它可以静态分析代码中的导入，并排除任何未使用的代码。这使我们能够在现有工具和模块之上构建，而无需添加额外的依赖项或增加项目的大小。如果使用webpack，虽然可以实现tree-shaking，但是需要自己配置，打包后的代码非常臃肿，所以rollup更适合库文件和UI组件。搭建库打包脚手架1.rollup入门首先，我们安装rollup：npmirollup-g然后在本地创建一个项目：mkdir-pmy-projectcdmy-project其次，我们创建一个入口，编写如下代码：//src/main.jsimportsayfrom'./say.js';export{say}//src/say.jsexportdefaultfunction(name){console.log(name)};基本代码准备好后，我们编写rollup配置文件（根目录下的rollup.config.js）：//rollup.config.jsexportdefault{input:'src/main.js',output:{file:'bundle.js',format:'cjs'}};这样我们在终端执行://--config或-c来使用配置文件rollup-c，这样目录下就生成了一个bundle.js，就是我们要的打包文件。我们也可以使用package.json设置打包配置信息，使用npmrunxxx打包测试代码。2、rollup插件的使用为了更灵活的打包库文件，我们可以配置rollup插件。比较实用的插件有：rollup-plugin-node-resolve——帮助Rollup寻找外部模块，然后导入rollup-plugin-commonjs——将commonJS模块转换成ES2015进行Rollup处理rollup-plugin-babel——让我们可以使用es6写代码的新特性rollup-plugin-terser--压缩js代码，包括es6代码压缩rollup-plugin-eslint--js代码检测封装一个库对于多个插件来说完全够用了，但是如果要实现react等组件的代码，可以使用的插件比较多，这里就不一一介绍了。我们可以这样使用，类似于webpack的插件配置：importresolvefrom'rollup-plugin-node-resolve';importcommonjsfrom'rollup-plugin-commonjs';importbabelfrom"rollup-plugin-babel";从'rollup-plugin-terser'导入{terser};从'rollup-plugin-eslint'导入{eslint};导出默认值[{输入：'src/main.js'，输出：{名称：'timeout'，文件:'/lib/tool.js',format:'umd'},plugins:[resolve(),//以便Rollup可以找到`ms`commonjs(),//以便Rollup可以将`ms`转换为anES模块eslint(),babel(),terser()]}];是不是很简单？个人觉得比webpack的配置简单多了。通过上面的配置，虽然可以实现基本的javascript文件打包，但是不够健壮。接下来，我们将逐步细化配置。3.使用babel编译es6代码首先我们安装babel相关的模块：npmicore-js@babel/core@babel/preset-env@babel/plugin-transform-runtime然后设置.babelrc文件{"presets":[["@babel/preset-env",{"modules":false,"useBuiltIns":"usage","corejs":"2.6.10","targets":{"ie":10}}]],"plugins":[//解决多处使用相同代码导致重复打包的问题["@babel/plugin-transform-runtime"]],"ignore":["node_modules/**"]}@babel/preset-env可以根据配置的目标浏览器或运行环境自动将ES2015+代码转换为es5。需要注意的是，我们设置了"modules":false，否则Babel会在Rollup还没来得及做处理之前，将我们的modules转为CommonJS，导致Rollup的部分处理失败。为了解决多处使用相同代码导致重复打包的问题，??我们需要在.babelrc的plugins中配置@babel/plugin-transform-runtime，需要修改rollup配置文件：babel({exclude:'node_modules/**',//防止打包node_modules下的文件runtimeHelpers:true,//使plugin-transform-runtime生效}),不熟悉babel的可以看我之前的webpack文章或者去官网学习。4.区分测试环境和开发环境我们可以在package.json中配置不同的执行脚本和环境变量，为开发和生产做不同的配置：//package.json"scripts":{"build":"NODE_ENV=productionrollup-c","dev":"rollup-c-w","test":"nodetest/test.js"}，我们可以手动将NODE_ENV导出为生产和开发来区分生产和开发环境，然后在参数通过代码中的process.env.NODE_ENV获取。这里我们主要是用来设置代码在开发环境不压缩：constisDev=process.env.NODE_ENV!=='production';//...plugins:[!isDev&&terser()]使用eslint对于代码检测我们可以使用上面提到的rollup-plugin-eslint来配置：eslint({throwOnError:true,throwOnWarning:true,include:['src/**'],exclude:['node_modules/**']})然后构建.eslintrc.js根据自己的风格配置具体检测：module.exports={"env":{"browser":true,"es6":true,"node":true},"extends":“eslint：推荐”，“globals”：{“原子”：“只读”，“SharedArrayBuffer”：“只读”，“ENV”：真}，“parserOptions”：{“ecmaVersion”：2018，“sourceType”：“module"},"rules":{"linebreak-style":["error","unix"],"quotes":["error","single"]}};详细的eslint配置可以去官网学习。5.外部属性用rollup打包。我们需要在自己的库中使用第三方库，比如lodash等，不希望最终打包文件中出现jquery。这时候我们就需要用到外部属性了。比如我们使用lodash，import_from'lodash'//rollup.config.js{input:'src/main.js',external:['lodash'],globals:{lodash:'_'},output:[{file:pkg.main,format:'cjs'},{file:pkg.module,format:'es'}]}6.导出方式我们可以将我们的代码导出到commonjs模块，es模块，浏览器可以识别的模块设置如下：{input:'src/main.js',external:['ms'],output:[{file:pkg.main,format:'cjs'},{file:pkg.module,format:'es'},{file:pkg.module,format:'umd'}]}发布到npm如果你之前没有注册过npm账号，可以配置如下：npmadduser输入用户名，邮箱，密码，最后使用npmpublish发布。这里是打包配置文件，package.json:{"name":"@alex_xu/time","version":"1.0.0","description":"常用js时间库","main":"dist/tool.cjs.js","module":"dist/time.esm.js","browser":"dist/time.umd.js","author":"alex_xu","homepage":"https://github.com/MrXujiang/timeout_rollup","keywords":["tools","javascript","library","time"],"dependencies":{//...},"devDependencies":{//...},"scripts":{"build":"NODE_ENV=productionrollup-c","dev":"rollup-c-w","test":"nodetest/test.js","pretest":"npmrunbuild"},"files":["dist"]}name是包名，可以直接写包名，比如loadash，或者加个域，类似@koa/router类型，@后面是你的npm注册用户名。key是包的关键字。发布后，我们可以通过类似下面的方式安装它：')以下是安装截图：也可以在npm上搜索自己的包：是不是很有成就感呢？让大家一起使用你开发的包吧！
