Rollup

概述(Overview)

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

一、安装

$ yarn add rollup -g
// # OR
$ npm i rollup -g

二、rollup.config.js

使用 npm init 创建项目，并配置rollup.config.js文件以及安装相关依赖。

// rollup.config.js 简介
export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file,    // 必须
    format,  // 必须
    name,
    globals,

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

具体的DEMO代码实现：

'use strict';
import clear from 'rollup-plugin-clear';
import ts from "rollup-plugin-typescript2";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from 'rollup-plugin-commonjs';
import { uglify } from 'rollup-plugin-uglify';
import webWorkerLoader from 'rollup-plugin-web-worker-loader';

const extensions = [
    '.js', '.jsx', '.ts', '.tsx',
];

export default {
    input: 'src/main.ts',
    output: {
        globals: {
            'websocket': 'websocket',
            'jquery': '$',
            'stream': 'stream',
            // 'web-worker': 'web-worker',
        },
        file: 'dist/cloudgame_sdk.js',
        // rollup支持的打包文件的格式有amd, cjs, es\esm, iife, umd
        format: 'umd',
        name: 'cloudgame_sdk'
        // 当入口文件有export时，'umd'格式必须指定name
        // 这样，在通过<script>标签引入时，才能通过name访问到export的内容。
    },
    plugins: [
        clear({targets: ['dist/cloudgame_sdk.js']}), //清除dist目录
        uglify({
            compress:{
                drop_debugger: true,
                // drop_console: true,
                pure_funcs: [ 'console.log' ]
            }
        }),
        resolve({ extensions }),
        commonjs({
            include: 'node_modules/**',
        }),
        webWorkerLoader(),
        ts({
            useTsconfigDeclarationDir: true
        }),
    ],
    // 指出应将哪些模块视为外部模块
    // external: ["jmuxer"], 
    // external: ['jquery', 'websocket'],
};

三、与Gulp集成

const gulp = require('gulp');
const rollup = require('rollup');
const rollupTypescript = require('rollup-plugin-typescript');

gulp.task('build', async function () {
  const bundle = await rollup.rollup({
    input: './src/main.ts',
    plugins: [
      rollupTypescript()
    ]
  });

  await bundle.write({
    file: './dist/library.js',
    format: 'umd',
    name: 'library',
    sourcemap: true
  });
});

或者通过package.json里面配置脚本命令进行组合集成：

"scripts": {
    "build": "npm run gulp && npm run rollup",
    "rollup": "rollup -w -c rollup.config.js",
    "gulp": "gulp",
    "test": "jest"
},
// 在根目录新建 gulpfile.js 配置文件

四、项目DEMO

• 技术栈：

  • 打包工具：rollup / gulp。
    • rollup主要整体打包js代码;
    • gulp主要打包ios的worker文件及依赖，还有移动其他文件（比如*.wasm）。
  • 核心点（模块化）：ES + Typescript。

• 目录简介：

  • main.ts： 入口文件
  • dep文件夹： 相关依赖文件

• 打包命令：

  • npm i：安装依赖；
  • npm run build： 打包命令 --> 生成 【dist】文件夹

DEMO源码：
Rollup DEMO源码

参考：
Rollup中文官网