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 distsrcフォルダに変換前のソースコードを作成する
src/index.jsがメインファイルであると想定する
distフォルダにトランスパイルされた jsファイルが保存される
dist/bundle.jsという名前で生成
package.json の作成
npm init
# 適当に入力browserify のインストール
npm install --save-dev browserifybrowserify は クライアントサイドのJavaScriptでモジュールシステムを実現するツール。
babelify のインストール
npm install --save-dev babelify babel-preset-es2015babelify は browserify が javascript を処理する際に babel によって
ES2015で書かれたソースを (browserが理解できる) ES5 に変換するツール。
babel-preset-es2015 は
ES2015 の変換機能。
babel 本体から変換機能を切り離すことで、利用者は使用する機能を 取捨選択することが可能になっている。
browserify と組み合わせず、babel のコマンドラインツールで
変換することも可能。
今回は、後述する npm run build コマンド一回で
トランスパイルが完了するようにしたかったため、このような構成とした。
knockoutのインストール
npm install --save-dev knockoutbrowserify によってトランスパイルした際に
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 が生成されていることを確認する。
