rollup.js

WebApp/2 では rollup.js を使って、事前結合コード(app/bundler.js)を生成します。

Overview

rollup.js は、以下の特徴をもっています。

• ES6+ESModules なコードをうまく扱う事を出発点に開発された bundler です

  ES5+CommonJS で書かれたコードを Browser でも動作するように変換し結合する機能を出発点にしたのが Browserify で、
  様々なフォーマット(CommonJS, AMD, UMD, ES5/ES6, CSS, image...)を変換し結合する機能を出発点にしたのが webpackです

• プラグイン を使うことで、CommonJS, UMD, AMD 形式で書かれたコードを ESModules 形式に変換する transpiler としての機能をもっています
• ESModules なコードを結合する bundler としての機能をもっています
• rollup-plugin-buble プラグインを使うことで、ES6 を ES5 に変換することができます(IE11対応も可能です)
• rollup-plugin-node-resolveプラグインを使うことで、node_modules 以下に配置されている ES5/ES6 なコードを import { ... } from "モジュール名"; で呼び出す事が可能です

つまり、rollup.js を経由することで、ESModules(ES6)で書かれたコードならそのまま結合できますし、 CommonJSで書かれたnpmモジュールも rollup.js で一旦 ES6+ESModules に変換することで、WebApp/2 から利用することができます。

Rollupがちょうどいい感じ が参考になるでしょう。

Install

npm i コマンドを実行すると自動的にインストールされます。

npm i でインストールされる rollup.js と rollup.js のプラグインは以下のようになっています(バージョン番号は実際の環境と違っている可能性があります)

  "devDependencies": {
    "eslint": "^3.19.0",
    "rollup": "^0.41.6",
    "rollup-watch": "^3.2.2",
    "rollup-plugin-buble": "^0.15.0",
    "rollup-plugin-cleanup": "^1.0.0",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-eslint": "^3.0.0",
    "rollup-plugin-license": "^0.4.0",
    "rollup-plugin-node-resolve": "^3.0.0"
  }

その他のプラグインが必要な場合は、 npm i -D rollup-plugin-プラグイン名 で個別にインストールしてください。

npm i -D rollup-plugin-typescript2    # TypeScript 用のプラグインをインストールします
npm i -D rollup-plugin-flow           # Flow type 用のプラグインをインストールします

独自にプラグインをインストールした場合は、後述する .rollup.es6.js や .rollup.es5.js ファイルにも設定を追加してください。

Configuration file

WebApp/2 には 2つの設定ファイル( .rollup.es6.js, .rollup.es5.js )が同梱されています。

ES6 bundle setting

ES6 が動作する環境向けに bundle する場合は、以下のように設定してください。

import path from "path";
import resolve from "rollup-plugin-node-resolve"; // resolve node_modules/index.js to ES6
import commonjs from "rollup-plugin-commonjs";    // convert CommonJS -> ES6
//import buble from "rollup-plugin-buble";          // convert ES6 -> ES5
import eslint from "rollup-plugin-eslint";        // ESLint
import cleanup from "rollup-plugin-cleanup";      // clear comments and empty lines
import license from "rollup-plugin-license";      // add License header

// --- ES5/ES6/CommonJS/ESModules -> ES6 bundle ---
export default {
  format: "es",
  entry: "app/lib/AppMain.js",
  dest: "app/bundle.js",
  plugins: [
    resolve({ jsnext: true }),
    commonjs(),
  //buble(), // ES6 -> ES5
    eslint({ configFile: path.resolve("./.eslintrc") }),
    cleanup(),
    license({
      banner: "Copyright 2017 @uupaa",
      //thirdParty: {
      //  output: path.join(__dirname, "dependencies.txt"),
      //  includePrivate: true, // Default is false.
      //},
    }),
  ],
  intro: "",
  outro: "",
  banner: "if (typeof WebApp2 === \"undefined\") { // avoid duplicate running",
  footer: "}",
}

上記の設定で生成されるコードは ES6 ベースになります。import と export は含まれていません。

ES5 bundle setting

ES6 が動作しない環境向けに bundle する場合は、以下のように設定してください。

import path from "path";
import resolve from "rollup-plugin-node-resolve"; // resolve node_modules/index.js to ES6
import commonjs from "rollup-plugin-commonjs";    // convert CommonJS -> ES6
import buble from "rollup-plugin-buble";          // convert ES6 -> ES5
import eslint from "rollup-plugin-eslint";        // ESLint
import cleanup from "rollup-plugin-cleanup";      // clear comments and empty lines
import license from "rollup-plugin-license";      // add License header

// --- ES5/ES6/CommonJS/ESModules -> ES5 bundle ---
export default {
  format: "iife", // wrap (function(){ code })();
  entry: "app/lib/AppMain.js",
  dest: "app/bundle.js",
  plugins: [
    resolve({ jsnext: true }),
    commonjs(),
    buble(), // ES6 -> ES5
    eslint({ configFile: path.resolve("./.eslintrc.es5.json") }),
    cleanup(),
    license({
      banner: "Copyright 2017 @uupaa",
      //thirdParty: {
      //  output: path.join(__dirname, "dependencies.txt"),
      //  includePrivate: true, // Default is false.
      //},
    }),
  ],
  intro: "",
  outro: "",
  banner: "if (typeof WebApp2 === \"undefined\") { // avoid duplicate running",
  footer: "}",
}

上記の設定で生成されるコードは ES5 ベースになります。import と export は含まれていません。 (function() { ... })(); でラップされます。