rollup打包剥离第三方库， external使用rollup打包，我们在自己的库中需要使用第三方库，例如lodash

使用rollup打包，我们在自己的库中需要使用第三方库，例如lodash等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。比如我们使用了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' }
    ]
}

备注：

Rollup快速上手

安装rollup模块yarn add rollup --dev
在node_modules/.bin目录就会有rollup.cmd，通过yarn rollup就可以直接使用
yarn rollup .\src\index.js --format iife --file dist/bundle.js指定打包格式为iife，并指定打包文件

打包结束，输出打包结果到bundle.js中

(function () {
  'use strict';

  const log = msg => {
    console.log('---------- INFO ----------');
    console.log(msg);
    console.log('--------------------------');
  };

  var messages = {
    hi: 'Hey Guys, I am zce~'
  };

  // 导入模块成员

  // 使用模块成员
  const msg = messages.hi;

  log(msg);

}());

可以看出，代码中未使用的代码会被自动清除，因为Rollup默认开启tree-shaking，如果用webpack，虽然可以实现tree-shaking，但需要配置并且打包的代码非常臃肿

Rollup配置文件

项目根目录添加rollup.config.js，如下

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js', // rollup支持的多种输出格式(有amd,cjs, es, iife 和 umd)
    format: 'iife',
  },
}

可以通过yarn rollup --config直接运行默认配置文件，也可以指定文件yarn rollup --config rollup.config.js，这样可以针对不同的环境使用不同的配置

Rollup使用插件

Rollup支持使用插件的方式，并不像webpack中分为loader、plugins和minimize三种扩展方式，插件时Rollip唯一扩展途径

rollup-plugin-json插件
1. 安装yarn add rollup-plugin-json --dev
2. rollup.config.js中通过esm模式引入，import json from 'rollup-plugin-json'，并添加到plugins中
3. 在index.js中获取json文件中的字段，import { name, version } from '../package.json'
4. 打包结果如下
  
  **
```
(function () {
    ...
    var name = "01-getting-started";
    var version = "0.1.0";

    log(name);
    log(version);
    ...
}());
```
加载Npm模块

Rollup不能像Webpack一样，直接使用模块的名称导入第三方模块，需要使用rollup-plugin-node-resolve

安装和使用同rollup-plugins-json插件一样，安装成功后导入lodash模块，Rollup默认处理esm模式的打包，所以需要导入import _ from 'lodash-es'，使用console.log(_.camelCase('hello world'))，打包结果如下

**
```
(function () {
    ...
    console.log(lodash.camelCase('hello world'));
    ...
}());
```
加载CommonJS模块

Rollup设计只处理ESModule的打包，导入CommonJS模块是不支持的；需使用rollup-plugin-commonjs
1. 创建cjs-module.js文件，以commonJS模式导出一个对象
  
  **
```
module.exports = {
  foo: 'bar'
}
```
2. 安装插件，并在plugins中配置
3. index.js引用模块，并使用
4. 打包结果如下
  
  **
```
(function () {
    ...
    var cjsModule = {
        foo: 'bar'
    };
    log(cjsModule);
    ...
}());
```
Rollup代码拆分

可以使用import()的方式动态导入文件，返回是一个promise对象

**
```
import('./logger').then(({ log }) => {
  log('hello')
})
```
此时通过yarn rollup --config运行打包报错UMD and IIFE output formats are not supported for code-splitting builds，因为立即执行函数会将所有模块放入同一个函数，没法实现代码拆分，需使用amd或commonjs标准

并且code-splitting会输出多个文件，rollup输出需要使用dir的方式，修改rollup.config.js

**
```
// rollup默认入口
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife',
    dir: 'dist',
    format: 'amd',
  },
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}
```
再次打包，就会在dist目录下生成入口bundle和动态导入生成的bundle，并且都是使用amd标准输出

rollup打包剥离第三方库， external

Rollup快速上手

Rollup配置文件

Rollup使用插件

Rollup代码拆分