rollup简介及使用

简介

webpack打包非常繁琐，打包体积比较大

rollup主要是用来打包JS库的

vue/react/angular都在用rollup作为打包工具

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

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下

package.json的scripts中添加指令：

{
  "name": "12.rollup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup --config",

format规范解释：

amd：seajs用的规范，目前基本不用了

umd：为了让模块同时兼容amd和cmd出现的

和babel的配合：

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下
    },
    plugins: [
        babel({
            exclude: /node_modules/
        }),

.babelrc：

{
    "presets": [
        [
            "@babel/preset-env",
            {"modules":false}
        ]
    ]
}

"modules":false参数告诉babel不要转换模块语法

源代码在build的过程中，会先经过babel，如果将模块转换打开，import require等这些就会被处理掉，影响rollup后续的流程

treeshaking

以下文件没有用到age：

import { name, age } from './msg'
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"
  },