快速学习 rollup 打包

1、rollup是什么

JavaScript的ES模块打包器

从一个入口文件开始，将所有使用到的模块文件都打包到一个最终的发布文件中

2、与webpack的差异

定位不同：webpack偏向于应用打包；rollup更专注于JavaScript类库打包

(1)如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择;

(2)如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup;

3、rollup的重要特性

(1)它使用ES6的模块标准，这意味着你可以直接使用import和export而不需要引入babel（当然，在现在的项目中，babel可以说是必用的工具了）。

(2)Rollup.js一个重要特性叫做'tree-shaking'，这个特性可以帮助你将无用代码（即没有使用到的代码）从最终的生成文件中删去。（这个特性是基于ES6模块的静态分析的，也就是说，只有export而没有import的变量是不会被打包到最终代码中的）

快速开始

npm install rollup -D

然后在本地创建一个项目：

mkdir -p my-project
cd my-project

其次我们创建一个入口文件，使用 lodash 测试代码写个简单的 demo：

import after from 'lodash/after'


var saves = ['profile', 'settings'];


var done = after(saves.length, function() {
  console.log('done saving!');
});


done()
done()

基本代码准备好了之后，我们写 rollup 的配置文件 (rollup.config.js 在根目录下)：

export default {
    input:'src/main.js',
    output:{
        file:'dist/bundle.cjs.js',//输出文件的路径和名称
        format:'cjs',//五种输出格式：amd/es6/iife/umd/cjs
        name:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下
    }
}

package.json 添加一条运行的命令：

{
 "scripts": {
    "build": "rollup --config"
  },
}

这样在根目录下就生成了一个bundle.cjs.js，就是我们想要的打包后的文件。