2015/12/28

browserifyでknockout.jsをトランスパイル

knockout.js を ES2015 で書くための手順についてまとめる。

環境

  • OS: Microsoft Windows [Version 6.1.7601]
  • Node: v4.2.3
  • npm: 2.14.7


モジュール バージョン

各モジュールのバージョンは以下のとおり。

"devDependencies": {
  "babel-preset-es2015": "^6.3.13",
  "babelify": "^7.2.0",
  "browserify": "^12.0.1",
  "knockout": "^3.4.0"
}


プロジェクトフォルダの作成

mkdir knockout-es6-project
cd knockout-es6-project
mkdir src
mkdir dist
  • src フォルダに変換前のソースコードを作成する
    • src/index.js がメインファイルであると想定する
  • dist フォルダにトランスパイルされた jsファイルが保存される
    • dist/bundle.js という名前で生成


package.json の作成

npm init
# 適当に入力


browserify のインストール

npm install --save-dev browserify

browserify は クライアントサイドのJavaScriptでモジュールシステムを実現するツール。



babelify のインストール

npm install --save-dev babelify babel-preset-es2015

babelify は browserify が javascript を処理する際に babel によって
ES2015で書かれたソースを (browserが理解できる) ES5 に変換するツール。

babel-preset-es2015 は ES2015 の変換機能。

babel 本体から変換機能を切り離すことで、利用者は使用する機能を 取捨選択することが可能になっている。

browserify と組み合わせず、babel のコマンドラインツールで 変換することも可能。
今回は、後述する npm run build コマンド一回で トランスパイルが完了するようにしたかったため、このような構成とした。



knockoutのインストール

npm install --save-dev knockout

browserify によってトランスパイルした際に dist/bundle.js に knockout.js 本体も含まれるようにする。



package.json の修正

{
  "name": "knockout-es6-project",
  "version": "1.0.0",
  "description": "knockout es6 sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify src/index.js -o dist/bundle.js"
  },
  "keywords": [
    "knockout.js",
    "babel",
    "es2015",
    "browserify"
  ],
  "author": "Kazunori Kimura <kazunori.kimura.js@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "knockout": "^3.4.0"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }
}

修正点は以下の2つ。

  • scripts に build の指定を追加。
    • browserify を使用して index.js を bundle.js に変換する
  • browserify を追加し、presets を指定
    • .babelrc というファイルを作成して presets の指定を行うことも可能だが、package.json に集約するほうがシンプルであると判断した


サンプルコード

src/index.js

import ko from "knockout";
import MyViewModel from "./MyViewModel";

ko.components.register("MyComponent",
{
  viewModel: MyViewModel,
  template: `<div>
  <input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'">
  length: <span data-bind="text: text().length"></span>
</div>`
});

ko.applyBindings();

src/MyViewModel.js

import ko from "knockout";

export default class MyViewModel {
  constructor(){
    this.text = ko.observable("");
  }
}

dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div data-bind="component: 'MyComponent'"></div>
  <script src="bundle.js"></script>
</body>
</html>


トランスパイルの実行

$ npm run build

> knockout-es6-project@1.0.0 build C:\Repository\knockout-es6-project
> browserify src/index.js -o dist/bundle.js

dist/bundle.js が生成されていることを確認する。



参考

Smarter knockout applications with ES6/7

投稿者 時刻:
ラベル: , , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)