rollup

1.rollup总结：
1)rollup可以使你的程序打包后以模块形式加载于其他项目中；
2）rollup可以打包输出各种主流类型模块格式，兼容性高；
3）rollup可以通过安装插件，对vue，react等主流框架编写的程序进行打包；
4）rollup可以通过安装插件实现代码规范化，差错，压缩，uglify,可操作性强。
2.项目中对代码进行模块化打包 ，模块化后的代码能非常便利的再其他项目中进行使用，并解决了代码内容变动产生的差异化问题。

3.模块化的好处：为项目组建分割化开发，降低复杂度；开发通用liberary，可用于多个不同项目中应用同一处理模块；
能够轻松植入到第三方代码中。

4.rollup.js运行机制：input(模块1，模块2…模块n，库1，库2…库n) ->通过插件plugins(node-resolve,commonjs)->output(模块 library,App)
rollup是一个目前较为流行的javaScript模块打包器，常见的JavaScript的开源程序及Library的模块化打包都是用到Rollup

5.rollup.js的特点：
1）兼容性高：可以自由打包成目前常规的模块类型（如commonjs和ES6），兼容各个浏览器标准；
2）统一处理：可对全体代码（包括引用模块）的语法格式统一，纠错，进行统一处理；
3）压缩：对代码进行压缩处理，产出更小容量的代码文件插件；庞大的插件库，并支持自定义插件开发
4）庞大的插件库
5）打包速度块，配置简单

6.rollup.js的安装
1）首先需要安装nodejs
2）其次可以全局安装或者局部安装
npm install rollup -g rollup -version
npm install rollup --save-dev
3)rollup.js的基本命令：
全局安装之后可以执行的命令：rollup ./index.js -o dist/index_es.js -f es
局部安装之后可执行的命令： ./node_modules/.bin/rollup ./index.js -o dist/index_es.js -f es
该命令的意思是：将文件index.js打包为ES6模块后保存到dist/index_es.js
4）可以在项目根目录中建立一个名为rollup.config.js的配置文件
export default[{
input:‘src/***/[target.js]’,//需要模块化打包的目标文件
output:[{
file:’***/[output].js’,//输出路径及输出文件名
format:‘es’//输出类型（amd,cjs,es,iife,umd）
}],
external:[],//外链列表（可选）
plugin:[],//插件列表（可选）
}];
5）可以通过命令行选择配置进行打包
rollup -c -o bundle-2.js

6）例子：
export default[{
input:’./index.js’,//需要模块化打包的目标文件
output:[{
file:‘dist/index_cjs.js’,//输出路径及输出文件名
format:‘cjs’//输出类型（amd,cjs,es,iife,umd）
},
{
file: ‘dist/index_es.js’,//输出路径及输出文件名
format: ‘es’//输出类型（amd,cjs,es,iife,umd）
}]
}];
执行命令行rollup -c ，分别生成cjs形式的模块文件.dist/index_cjs.js和es形式文件./dist/index_es.js

7.Rollup的一大优势就是拥有强大的插件库可供选择。用户可以根据自身需要，安装对应插件实现代码纠错、规范化、压缩、uglify以及
对vue、react等主流框架代码进行编译和打包。

这里介绍一些常用插件：

· rollup-plugin-clear：用于在打包前对输出目录进清扫，删除不需要的文件或者清空目录

· rollup-plugin-alias：modules名称的 alias 和reslove 功能

· rollup-plugin-babel：babel语法编译

· rollup-plugin-eslint：eslint代码语法规范及纠错

· rollup-plugin-terser：代码压缩用插件

· rollup-plugin-node-resolve：解析 node_modules 中的模块

· rollup-plugin-commonjs：转换 cjs

· rollup-plugin-replace：用于环境变量参数的替换

通过npm install以上模块后，可以通过重新配置rollup.config.js文件，实现插件功能

1.Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是像Commonjs 和 AMD这种特殊解决方案。

rollup最大的亮点就是Tree-shaking，即可以静态分析代码中的 import，并排除任何未使用的代码。
这允许我们架构于现有工具和模块之上，而不会增加额外的依赖或使项目的大小膨胀。
如果用webpack做，虽然可以实现tree-shaking，但是需要自己配置并且打包出来的代码非常臃肿，所以对于库文件和UI组件，rollup更加适合。
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代码检测

import resolve from ‘rollup-plugin-node-resolve’;
import commonjs from ‘rollup-plugin-commonjs’;
import babel from “rollup-plugin-babel”;
import { terser } from ‘rollup-plugin-terser’;
import { eslint } from ‘rollup-plugin-eslint’;

export default [
{
input: ‘src/main.js’,
output: {
name: ‘timeout’,
file: ‘/lib/tool.js’,
format: ‘umd’
},
plugins: [
resolve(), // 这样 Rollup 能找到 ms
commonjs(), // 这样 Rollup 能转换 ms 为一个ES模块
eslint(),
babel(),
terser()
]
}
];
实现基本的javascript文件打包配置