rollup

rollup是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和node.js使用
相比其他JavaScript打包工具，rollup总能打出更小，更快的包
这时因为rollup基于ES2015模块，比webpack和browserify使用的commonJS模块机制更高效。这也让rollup从模块中删除无用的代码，即tree-shaking变得更容易

Tree-shaking

这个特点，是Rollup最初推出时的一大特点。Rollup通过对代码的静态分析，分析出冗余代码，在最终的打包文件中将这些冗余代码删除掉，进一步缩小代码体积。这是目前大部分构建工具所不具备的特点(Webpack 2.0+已经支持了，但是有开发者认为并没有Rollup做得干净)

ES2015模块打包支持

这个也是其他构建工具所不具备的。Rollup不需要通过babel将import转化成Commonjs的require方式，极大地利用ES2015模块的优势

安装

全局安装更易使用

npm i -g rollup

npm i -g rollup

使用

新建src文件夹，其下新建index.js,执行打包命令

rollup -i src/index.js -o dist/bundle.js -f es

rollup -i src/index.js -o dist/bundle.js -f es

-i指定打包的入口文件，-i是--input的缩写
src/index.js是-i的参数，即被指定的打包的入口文件
-o指定输出的文件，是--output.file或--file的缩写(如果没有这个参数，则直接输出到控制台)
dist/bundle.js是-o的参数，即输出文件
-f指定打包文件的格式，-f是--format的缩写
es是-f的参数，表示打包文件使用ES6模块规范

打包格式

rollup支持的打包文件的格式有

amd
cjs
es\esm,
iife, umd

amd为AMD标准，cjs为CommonJS标准，esm\es为ES模块标准，iife为立即调用函数， umd同时支持amd、cjs和iife

rollup.config.js

rollup配置文件，项目根目录下创建

export default {
  input: "./src/index.js", // 入口文件路径
  output: [ // 输出文件名及文件格式
    {
      file: './dist/my-lib-umd.js',
      format: 'umd',  //当入口文件有export时，'umd'格式必须指定name
      name: 'myLib'  //这样，在通过<script>标签引入时，才能通过name访问到export的内容
    },
    {
      file: './dist/my-lib-es.js',
      format: 'es'
    },
    {
      file: './dist/my-lib-cjs.js',
      format: 'cjs' // CJS是CommonJS的缩写
    }
  ]
}

export default {
  input: "./src/index.js", // 入口文件路径
  output: [ // 输出文件名及文件格式
    {
      file: './dist/my-lib-umd.js',
      format: 'umd',  //当入口文件有export时，'umd'格式必须指定name
      name: 'myLib'  //这样，在通过<script>标签引入时，才能通过name访问到export的内容
    },
    {
      file: './dist/my-lib-es.js',
      format: 'es'
    },
    {
      file: './dist/my-lib-cjs.js',
      format: 'cjs' // CJS是CommonJS的缩写
    }
  ]
}

修改script字段

生成默认package.json

npm init -y

npm init -y

package.json添加以下内容

"scripts": { 
    "dev1": "rollup -c"                
    "dev2": "rollup -c my.config.js"  
    "dev3": "rollup -wc" 
}

"scripts": { 
    "dev1": "rollup -c"                
    "dev2": "rollup -c my.config.js"  
    "dev3": "rollup -wc" 
}

scripts表示node脚本
-c表示执行编译，默认使用rollup.config.js
-c后面接js文件，表示使用自定义的配置文件，my.config.js
c参数表示执行编译，w参数表示监听文件状态，即在文件修改后自动重新编译

#执行脚本
npm run dev1
npm run dev2
npm run dev3

#执行脚本
npm run dev1
npm run dev2
npm run dev3

rollup #

Tree-shaking #

ES2015模块打包支持 #

安装 #

使用 #

打包格式 #

rollup.config.js #

修改script字段 #