小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Rollup从0到1上手前端组件库开发 | 常用插件

上文回顾

常用插件

Babel 插件
Json 插件
terser 插件

Babel 在组件库开发的主要用途

将 ES6 的代码转换成 ES5 的代码

// ES6 代码
const test =() => 3
// 编译后还是箭头函数, 在低版本浏览器中是不兼容的~

为了解决这个问题, 我们需要在rollup配置中添加babel插件

安装 babel 插件

yarn add rollup-plugin-babel -D

在 rollup中配置babel

const path = require('path')
const resolve = require("rollup-plugin-node-resolve")
const commonjs = require('rollup-plugin-commonjs')
// 引入babel 插件
const babel = require('rollup-plugin-babel')
const inputPath = path.resolve(__dirname, "./src/index.js") // 输入路径
const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.js") // 输出路径
const outputEsPath = path.resolve(__dirname, "./dist/payfun.rollbear.dev.es.js") // 输出路径
console.log(inputPath)
module.exports = {
    input: inputPath,
    output: [
        {
            file: outputUmdPath, // 输出路径
            format: 'umd', // 输出的模块协议 umd
            name: "payfunRollbear" // 模块名称
        },
        {
            file: outputEsPath, // 输出路径
            format: 'es', // 输出的模块协议 es
            name: "payfunRollbear" // 模块名称
        }
    ],
    plugins: [
        resolve(),
        commonjs(),
        // 使用babel
        babel({
            exclude: 'node_modules/**', // 指定哪些文件夹时不进行babel编译的
        }),
    ],
    external: ['decimal.js'], //表示哪些模块是外部引用, 即使开启了 resolve 这里面的模块仍然是外部引用
}

编译一下文件查看一下结果

// 源代码
const test = () => 'test'
export default test

// 编译后 转成了 es5 的 function
var test = function test() {
  return 'test';
};
export { test as default };

JSON 插件

读取 package.json

import pkg from "../package.json"

console.log(pkg)


const test = () => "test"

export default test

npx babel-node ./stc/index.js 可以正常打印出 package.json 中的内容

编译: 看一下编译JSON的结果

yarn dev 结果报错了~

[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

因为 JSON文件默认不支持模块化构建的~~

安装 rollup-plugin-json

yarn add rollup-plugin-json -D 通过加入 json插件来实现 json文件的模块化编译

// rollup.config.dev.js
// ...
// 引入 json 插件
const json = require('rollup-plugin-json')

// 使用json 插件
 plugins: [
        resolve(),
        commonjs(),
        babel({
            exclude: 'node_modules/**', // 指定哪些文件夹时不进行babel编译的
        }),
        json(), // 使用json插件
],

编译结果

var name = "payfun.rollbear.view";
var version = "1.0.0";
var description = "前端PC端组件库RollBear源码仓库";
var main = "index.js";
var scripts = {
	dev: "rollup -wc rollup.config.dev.js"
};
var repository = {
	type: "git",
	url: "https://gitlab.ops.pay.fun/ad/payfun.rollbear.view.git"
};
var pkg = {
	name: name,
	version: version,
	description: description,
	main: main,
	scripts: scripts,
	repository: repository,
	keywords: keywords,
	author: author,
	license: license,
	devDependencies: devDependencies,
	dependencies: dependencies
};

console.log(pkg);

// ... 此处省略xxx行代码

编译成功~

Terser 插件

在实际开发过程中我们会将代码进行压缩, 通过terser插件可以对我们的代码进行最小化的压缩~

安装 terser

yarn add rollup-plugin-terser -D

在生产环境配置文件中配置 terser

rollup.config.prod.js

const path = require('path')
const resolve = require("rollup-plugin-node-resolve")
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const terser = require('rollup-plugin-terser')
const inputPath = path.resolve(__dirname, "./src/index.js") // 输入路径
const outputUmdPath = path.resolve(__dirname, "./dist/payfun.rollbear.min.js") // 输出路径
const outputEsPath = path.resolve(__dirname, "./dist/payfun.rollbear.min.es.js") // 输出路径
console.log(inputPath)
module.exports = {
    input: inputPath,
    output: [
        {
            file: outputUmdPath, // 输出路径
            format: 'umd', // 输出的模块协议 umd
            name: "payfunRollbear" // 模块名称
        },
        {
            file: outputEsPath, // 输出路径
            format: 'es', // 输出的模块协议 es
            name: "payfunRollbear" // 模块名称
        }
    ],
    plugins: [
        resolve(),
        commonjs(),
        babel({
            exclude: 'node_modules/**', // 指定哪些文件夹时不进行babel编译的
        }),
        json(),
        terser(),
    ],
    external: ['decimal.js'], //表示哪些模块是外部引用, 即使开启了 resolve 这里面的模块仍然是外部引用
}

在 package.json文件中增加生产环境编译脚本命令

 "scripts": {
    "dev": "rollup -wc rollup.config.dev.js",
    "build": "rollup -c rollup.config.dev.js",
    "build:prod": "rollup -c rollup.config.prod.js"
  }

测试

yarn build:prod

# 报错
[!] TypeError: terser is not a function
# 原因 : terser 需要通过解构的方式进行获取

修改 rollup.config.prod.js

const terser = require('rollup-plugin-terser')
// 改为
const {terser} = require('rollup-plugin-terser')

继续测试

$ rollup -c rollup.config.prod.js
/Users/pm/adtech/pc/payfun.rollbear.view/src/index.js

/Users/pm/adtech/pc/payfun.rollbear.view/src/index.js → dist/payfun.rollbear.min.js, dist/payfun.rollbear.min.es.js...
created dist/payfun.rollbear.min.js, dist/payfun.rollbear.min.es.js in 1.2s
✨  Done in 2.12s.
# 压缩编译成功

cat payfun.rollbear.min.es.js

var t=function(){return"test"};export{t as default};

压缩打包成功!