はじめに
webpackを使ってCycle.jsをサクッと試してみるまでの環境づくりです。
環境
- Mac OS X El Capitan
- Node.js v5.5.0
ディレクトリ構成
ディレクトリ構成はこんな感じで作っていきます。
.
├── .babelrc
├── dist
│ └── bundle.js
├── package.json
├── src
│ ├── index.html
│ └── index.js
└── webpack.config.js
ディレクトリ作成
適当なディレクトリを作って移動しておきましょう。
mkdir cycle.js
cd cycle.js
mkdir src dist
webpackインストール
webpackコマンドを使えるようにwebpackをグローバルにインストールしておきます。
npm install -g webpack
npmで諸々インストール
いろいろ必要になるのでnpmでインストールしていきます。
package.jsonを適当に作ります。
npm init
必要なものをインストールしていきます。
# cycle.js
npm install --save-dev rx @cycle/core @cycle/dom
# babel
npm install --save-dev babel-core babel-preset-es2015 babel-plugin-transform-react-jsx
# webpack
npm install --save-dev webpack babel-loader file-loader webpack-dev-server
今回はwebpack-dev-serverを使ってお手軽にライブリロードなサーバを立ち上げます。
.babelrc
今回はES2015だったりJSXだったりを使えるようにBabelを使います。
なのでBabelの設定ファイルを作っておきます。
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-react-jsx", {"pragma": "hJSX"}]
]
}
webpack.config.js
webpackの設定を作ります。
module.exports = {
context: __dirname + "/src",
entry: {
javascript: "./index.js",
html: "./index.html"
},
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devtool: "inline-source-map",
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
{test: /\.html$/, loader: "file?name=[name].[ext]"}
]
}
}
package.json修正
package.jsonを修正してnpm startでサーバを起動するようにします。
scriptsプロパティに{"start": "webpack-dev-server"}を追加します。
{
"name": "cycle.js_with_webpack",
// ...
"scripts": {
"start": "webpack-dev-server"
},
// ...
"devDependencies": {
"@cycle/core": "^6.0.0",
"@cycle/dom": "^9.0.2",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-plugin-transform-react-jsx": "^6.4.0",
"babel-preset-es2015": "^6.3.13",
"file-loader": "^0.8.5",
"rx": "^4.0.7",
"webpack": "^1.12.12",
"webpack-dev-server": "^1.14.1"
}
}
index.html作成
index.htmlを作ります。
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cycle.js Demo</title>
</head>
<body>
<header>
<h1>Cycle.js Demo</h1>
</header>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
index.js作成
実際にCycle.jsを使ってごにょごにょするやつです。
src/index.js
import Cycle from "@cycle/core"
import {makeDOMDriver, hJSX} from "@cycle/dom"
function main(drivers) {
return {
DOM: drivers.DOM.select("input").events("click")
.map(ev => ev.target.checked)
.startWith(false)
.map(
toggled =>
<div>
<input type="checkbox" /> Toggle me
<p>{toggled ? "ON" : "off"}</p>
</div>
)
}
}
const drivers = {DOM: makeDOMDriver("#app")}
Cycle.run(main, drivers)
内容は公式のGetting Startedのものです。
うごかす
ここまでできたらもう動く状態になっています。
次のコマンドでサーバが起動します。
npm start
にアクセスすればこんな感じでCheckboxをいじいじできるかと思います。
おわりに
うまくいってればライブリロードも有効になってます！
Cycle.js触ってみようと思ってついでにwebpack使ってみたんですがイイですね！