rollup打包环境搭建

林林总总

前言

本文主要介绍 $\color{#CD5C5C}{rollup}$ $\color{grey}{[JavaScript Api]}$ 使用，将一步步带领大家搭建一个 $\color{#CD5C5C}{library}$ 打包脚本。本文也将不单独介绍命令行调用，如需要请链接rollup中文文档

rollup中文文档
rollup和webpack使用场景
git项目demo传送门

Rollup 是一个 JavaScript 模块打包器,可以用于library 或应用程序将复杂代码解耦，从小块代码编译成大块代码。【...更多概念性的东西就不多介绍了】直接进入正文

目录结构

首先创建如下目录结构，src目录放置需要打包的library的源码，scripts放置打包脚本。本文只做案例，所有结构逻辑可按具体业务需求自行搭配。

下载依赖包

$\color{grey}{安装rollup}$

npm i rollup -D

$\color{grey}{安装rollup-plugin-babel}$ 官方传送门
rollup-plugin-babel是Rollup和Babel之间来转换ES6 / 7代码，并使用Rollup生成独立包的无缝集成插件。在安装的时候，需要注意根据不同的babel版本安装对应的插件版本，否则很容易报错哟。本文将以babel 6.x的版本进行安装

babel 7.x

npm i -D rollup-plugin-babel@latest

babel 6.x

npm i -D rollup-plugin-babel@3

$\color{grey}{安装rollup-plugin-node-resolve}$ 官方传送门
因为rollup打包library的时候，无法对node_modules的文件进行打包，所以我们需要引入rollup-plugin-node-resolve来使用第三方模块node_modules

npm i  -D rollup-plugin-node-resolve

$\color{grey}{安装rollup-plugin-uglify}$ 官方传送门
rollup-plugin-uglify只能压缩和转换es5语法，如果是es6+请使用rollup-plugin-uglify-es

npm i  -D rollup-plugin-uglify

$\color{grey}{安装babe-core}$ 官方传送门

// 6.x版本
npm i -D babel-core

$\color{grey}{安装babel-preset-env}$ 官方传送门
babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5

npm i -D babel-preset-env

$\color{grey}{安装babel-plugin-external-helpers}$ 官方传送门
babel-plugin-external-helpers 把 helpers 收集到一个共享模块或共享文件。helper 函数是 babel 在 transform 时候常用的工具函数，对编译模块时，会将用到的 helpers 放到模块顶部。如果编译多个文件，就会重复引用，导致每个模块都定义一份。

npm i -D babel-plugin-external-helpers

脚本文件

$\color{grey}{scripts/base.js}$
base.js是一个基础配置文件。为dev.js和build.js输出基础配置。本文将默认format:umd格式，如果设置umd，必须设置name哦。其他类型配置，请参考大选项列表

/**@base rollup config基础配置*/
const babel = require("rollup-plugin-babel")
const resolve = require("rollup-plugin-node-resolve")

module.exports = {
    // 打包入口
    input: 'src/index.js',
    // 插件
    plugins: [
        resolve(),
        babel({
            exclude: 'node_modules/**',
            plugins: ['external-helpers'],
            externalHelpers: true
        })
    ],
    // 输出配置
    output: {
        file: 'dist/Hon.js',
        format: 'umd',
        name: 'Hon'
    }
}

$\color{grey}{scripts/dev.js}$
dev主要涉及到rollup.watch的使用，监听src/*(可配置)下源码的变化，实现自动打包更新

/**@dev 构建*/
const rollup = require('rollup')
const config = require('./base')

// 初始化配置文件 可以根据需求扩展config
const watcher = rollup.watch(config);

watcher.on('event', event => {
    // 状态码
    console.log(event.code)
    // logic
});

$\color{grey}{scripts/build.js}$
build主要涉及到rollup.rollup的使用，打包到dist目录

/**@build 构建*/
const rollup = require('rollup')
const {uglify} = require('rollup-plugin-uglify')
const config = require('./base')
const version = process.env.VERSION || require('../package.json').version

// 设置头部注释信息
const banner =
    '/*!\n' +
    ` * Hon v${version}\n` +
    ` * (c) 2018-${new Date().getFullYear()} li hui\n` +
    ' * Released under the MIT License.\n' +
    ' */'

// 设置尾部注释信息
const footer =
    `/** ${new Date()} **/`

config.output.banner = banner
config.output.footer = footer

function getSize(code) {
    return (code.length / 1024).toFixed(2) + 'kb'
}

async function build(config) {
    const bundle = await rollup.rollup(config)
    // 通过generate拿到code代码 ，计算代码大小
    const {output: [{code}]} = await bundle.generate(config.output)
    console.log(config.output.file + ':' + getSize(code))
    bundle.write(config.output)
}

build(config).then(() => {
    // 打压缩包
    config.plugins.push(uglify())
    config.output.file = 'dist/Hon.min.js'
    build(config).then(() => {
        console.log('succeed')
    })
})

$\color{grey}{src/index.js}$
默认源码文件

/**@index 入口文件*/

function reduce() {
    console.log('reduce')
}

const utils = {
    add(a, b) {
        return a + b
    }
}

function Hon(config) {
    this.config = config
}

Hon.prototype.say = function () {
    console.log(this.config)
}

Hon.prototype.add = function (a, b) {
    return utils.add.call(this, a, b)
}


module.exports = Hon

设置

.babelrc 可按业务需求扩展

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

pageage.json 设置启动命令
使用的是babel-node，如果找不到该命令，请全局安装下npm i -g babel-cli

"scripts": {
    "dev": "babel-node scripts/dev.js",
    "build": "babel-node scripts/build.js"
  }

$\color{grey}{小伙伴们，安装 - 脚本文件 -配置都已经好了，现在可以运行命令了}$

运行

npm run dev

如下


lwydeMacBook-Air:rollup-demo lwy$ npm run dev

> rollupdemo@1.0.0 dev /Users/lwy/Documents/rollup-demo
> babel-node scripts/dev.js

START
BUNDLE_START
BUNDLE_END
END

dist/Hon.js

(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
    factory();
}(function () { 'use strict';

    /**@index 入口文件*/

    var utils = {
        add: function add(a, b) {
            return a + b;
        }
    };

    function Hon(config) {
        this.config = config;
    }

    Hon.prototype.say = function () {
        console.log(this.config);
    };

    Hon.prototype.add = function (a, b) {
        return utils.add.call(this, a, b);
    };

    module.exports = Hon;

}));

现在我们对src/index.js添加个utils.reduce方法

  var utils = {
        add: function add(a, b) {
            return a + b;
        },
        reduce:function () {
            
        }
    };

发现控制台watcher又自动执行了

lwydeMacBook-Air:rollup-demo lwy$ npm run dev

> rollupdemo@1.0.0 dev /Users/lwy/Documents/rollup-demo
> babel-node scripts/dev.js

START
BUNDLE_START
BUNDLE_END
END


START
BUNDLE_START
BUNDLE_END
END

我们再去看看dist/Hon.js，也进行了实时更新

(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
    factory();
}(function () { 'use strict';

    /**@index 入口文件*/

    var utils = {
        add: function add(a, b) {
            return a + b;
        },
        reduce:function () {
            
        }
    };

    function Hon(config) {
        this.config = config;
    }

    Hon.prototype.say = function () {
        console.log(this.config);
    };

    Hon.prototype.add = function (a, b) {
        return utils.add.call(this, a, b);
    };

    module.exports = Hon;

}));

好的，那我们develop的基础功能就弄好了。

build

现在来看看build的表现吧

npm run build

lwydeMacBook-Air:rollup-demo lwy$ npm run build

> rollupdemo@1.0.0 build /Users/lwy/Documents/rollup-demo
> babel-node scripts/build.js

dist/Hon.js:0.64kb
dist/Hon.min.js:0.28kb
succeed

生成了一个压缩和未压缩的文件

image.png

构建完成了。