Rollup实践指南（基础版）

一：引言

Rollup 是一个 JavaScript 模块打包工具，其特点包含api简单，支持tree-shaking,支持es模块化等。多项例子表明rollup在第三方库与框架开发时有着良好的优势。

二：快速使用

1.安装并添加配置

安装rollup

npm install --global rollup

初始化package.json

npm init -y

创建rollup.config.js,并修改package.json的scripts

rollup.config.js

export default {

 }

package.json

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

创建目录

创建src作为打包入口目录，dist作为打包输出目录

2. input与ouput(入口与出口)

单个入口配置

export default {
    input:'src/main.js',//入口文件
    output:{
      file: './dist/bundle.js',
      format: 'cjs'//输出的类型command js类型
    },
}

多个入口配置

export default [
    {
        input:'src/main.js',//入口文件
        output:{
          file: './dist/bundle1.js',
          format: 'cjs'//输出的类型command js类型
        },
    },
    {
        input:'src/main2.js',//入口文件
        output:{
          file: './dist/bundle2.js',
          format: 'cjs'//输出的类型command js类型
        },
    }
]

3.json插件

不同于webpack,webpack在打包非js文件时必须采用对应的loader进行文件的解析，而rollup所有的文件解析都采用插件plugin完成。

安装

 npm install --save-dev @rollup/plugin-json

配置

rollup.config.js

 import json from '@rollup/plugin-json';
 export default {
    input:'src/main.js',//入口文件
    output:{
      file: './dist/bundle.js',
      format: 'cjs'//输出的类型command js类型
    },
    plugins:[
        json()
    ]
}

src/main.js

import {version} from "./../package.json"

console.log(version)

4. resolve

如果想在rollup中使用第三方插件，必须借助resolve插件去完成。值得注意的是resolve引入的插件必须是es module类型。

安装

 npm install --save-dev @rollup/plugin-node-resolve

配置

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
 export default {
    input:'src/main.js',//入口文件
    output:{
      file: './dist/bundle.js',
      format: 'cjs'//输出的类型command js类型
    },
    plugins:[
        json(),
        resolve()
    ]
}

src/main.js

import _ from "lodash-es"
console.log(_.add(1,2))

5. commonjs

npm大部分的第三方模块是commonjs模块，因此我们必须借助commonjs插件对其解析。

安装

 npm install --save-dev @rollup/plugin-commonjs

配置

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
 export default {
    input:'src/main.js',//入口文件
    output:{
      file: './dist/bundle.js',
      format: 'cjs'//输出的类型command js类型
    },
    plugins:[
        json(),
        resolve()
    ]
}

src/main.js

import _ from "lodash"
console.log(_.add(1,2))

6. babel

为了兼容不同浏览器对js的支持，我们必须借助babel插件对es6代码进行降级转换。

安装

 npm install --save-dev @rollup/plugin-babel @babel/preset-env @babel/core

根目录下创建.babelrc文件

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

配置

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
 export default {
    input:'src/main.js',//入口文件
    output:{
      file: './dist/bundle.js',
      format: 'cjs'//输出的类型command js类型
    },
    plugins:[
        json(),
        resolve()
    ]
}

src/main.js

import _ from "lodash"
console.log(_.add(1,2))
export default ()=>{
    console.log('111');
}

7.分包处理

借助import().then的方式可以让导入的模块单独打包。当考虑到分包时，我们必须对output配置进行微微调整。

配置

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
 export default {
    input:'src/main.js',//入口文件
    output:{
      dir: './dist',//分包时必须指定dir目录
      format: 'cjs'//输出的类型command js类型
    },
    plugins:[
        json(),
        resolve()
    ]
}

foo.js

export default 'hello world!';

main.js

main.js中异步导入的模块foo,因此foo模块被切割出去。

import ('./foo.js').then(msg=>{
    console.log(msg);
})
console.log('111')