简介

webpack打包非常繁琐，打包体积比较大
rollup主要是用来打包JS库的
vue/react/angular都在用rollup作为打包工具

rollup的配置文件：rollup.config.js，放在根目录下

  1. export default {
  2.     input: 'src/main.js',
  3.     output: {
  4.         file: 'dist/bundle.es.js',//指定输出的文件名
  5.         format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
  6.         name: 'bundleName',//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下

package.json的scripts中添加指令：

  1. {
  2.   "name": "12.rollup",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "build": "rollup --config",

format规范解释：
amd：seajs用的规范，目前基本不用了
umd：为了让模块同时兼容amd和cmd出现的

和babel的配合：

  1. export default {
  2.     input: 'src/main.js',
  3.     output: {
  4.         file: 'dist/bundle.es.js',//指定输出的文件名
  5.         format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
  6.         name: 'bundleName'//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下
  7.     },
  8.     plugins: [
  9.         babel({
  10.             exclude: /node_modules/
  11.         }),

.babelrc：

  1. {
  2.     "presets": [
  3.         [
  4.             "@babel/preset-env",
  5.             {"modules":false}
  6.         ]
  7.     ]
  8. }

“modules”:false参数告诉babel不要转换模块语法
源代码在build的过程中，会先经过babel，如果将模块转换打开，import require等这些就会被处理掉，影响rollup后续的流程

treeshaking

以下文件没有用到age：

  1. import { name, age } from './msg'
  2. console.log(name)

./msg:

export var name = 'zhufeng';
export var age = 13;

打包后结果：

'use strict';

var name = 'zhufeng';

console.log(name)

没用到的age直接被删掉了

第三方模块的解析

如果是源码中包含了第三方模块，则什么都不做处理：

import _ from 'lodash'

执行build指令之后，只会报无法解析这个依赖，但源码会照样生成

为了解析第三方模块，我们需要引入resolve和common两个插件

rollup的插件，有带有@rollup 前缀的，有的是rollup开头的

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

rollup-plugin-babel 这是社区的
@rollup/plugin-commonjs 只有rollup官方才能发布

但是通常这种库我们都是通过cdn引入的，因此在HTML中加入cdn链接即可，而不需要打包到这里，然后通过全局变量的方式使用，所以此时我们需要在配置文件中添加globals配置和externals配置：

export default {
    input: 'src/main.js',
    output: {
        file: 'dist/bundle.es.js',//指定输出的文件名
        format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
        name: 'bundleName',//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下
        globals: {
            lodash: '_',//告诉 rollup 模块lodash可以从全局变量_上取
            jquery: '$'// 告诉 rollup 模块jquery可以从全局变量$上取
        }
    },
    plugins: [
        babel({
            exclude: /node_modules/
        }),
        resolve(),
        commonjs()
    ],
    external: ['lodash', 'jquery']
}

rollup对ts的支持

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
    input: 'src/main.js',
    output: {
        file: 'dist/bundle.es.js',//指定输出的文件名
        format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
        name: 'bundleName',//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下
        globals: {
            lodash: '_',//告诉 rollup 模块lodash可以从全局变量_上取
            jquery: '$'// 告诉 rollup 模块jquery可以从全局变量$上取
        }
    },
    plugins: [
        babel({
            exclude: /node_modules/
        }),
        resolve(),
        commonjs(),
        typescript(),

压缩混淆：

使用rollup-plugin-terser

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/main.js',
    output: {
        file: 'dist/bundle.es.js',//指定输出的文件名
        format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
        name: 'bundleName',//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下
        globals: {
            lodash: '_',//告诉 rollup 模块lodash可以从全局变量_上取
            jquery: '$'// 告诉 rollup 模块jquery可以从全局变量$上取
        }
    },
    plugins: [
        babel({
            exclude: /node_modules/
        }),
        resolve(),
        commonjs(),
        typescript(),
        terser(),

支持css：

使用rollup-plugin-postcss

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';

export default {
    input: 'src/main.js',
    output: {
        file: 'dist/bundle.es.js',//指定输出的文件名
        format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
        name: 'bundleName',//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下
        globals: {
            lodash: '_',//告诉 rollup 模块lodash可以从全局变量_上取
            jquery: '$'// 告诉 rollup 模块jquery可以从全局变量$上取
        }
    },
    plugins: [
        babel({
            exclude: /node_modules/
        }),
        resolve(),
        commonjs(),
        typescript(),
        terser(),
        postcss(),

支持开发服务器：

使用rollup-plugin-serve

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import serve from 'rollup-plugin-serve';
export default {
    input: 'src/main.js',
    output: {
        file: 'dist/bundle.es.js',//指定输出的文件名
        format: 'es',//指定输出的格式 amd/es/iife/umd/cjs
        name: 'bundleName',//当format格式为iife和umd的时候必须提供，它将会作为全局变量持在window下
        globals: {
            lodash: '_',//告诉 rollup 模块lodash可以从全局变量_上取
            jquery: '$'// 告诉 rollup 模块jquery可以从全局变量$上取
        }
    },
    plugins: [
        babel({
            exclude: /node_modules/
        }),
        resolve(),
        commonjs(),
        typescript(),
        terser(),
        postcss(),
        serve({
            open: true,
            port: 8080,
            contentBase: './dist'
        })
    ],

添加scripts命令：
-w watch

  "scripts": {
    "build": "rollup --config rollup.dev.config.js",
    "dev": "rollup --config -w"
  },