初めに
Yarnという新しい技術を使ってみましたので、
学習内容のまとめとして記録します。
間違っている点がありましたらご指摘お願いします。
Yarn環境の準備
Yarnのインストール
npmでインストールします。
$ npm install -g yarnpkg
ワーキングディレクトリの作成
ワーキングディレクトリを作成します。
$ mkdir hello-react-yarn
作成したディレクトリにyarn initコマンドを入力すると、
package.jsonが生成されます。
$ cd hello-react-yarn
$ yarn init
必要なファイルの準備
以下のディレクトリで作成します。
$ mkdir src dist
$ touch ./src/app.jsx
$ touch ./index.html
$ touch .babelrc
$ touch webpack.config.js
hello-react-yarn/
│
├─ src/
│ └─ app.jsx
├─ dist
├─ .babelrc
├─ index.html
├─ package.json
├─ webpack.config.js
└─ yarn.lock
作成したindex.htmlファイルには、以下のように記述しておきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
</head>
<body>
<div class="content"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
コンポーネントを作る
Reactをインストールする
以下のコマンドでReactとreact-domをインストールします。
$ yarn add react react-dom
Reactのコンポーネントを書く
以下のように記述します。
import React from 'react';
import ReactDOM from 'react-dom';
// コンポーネント名の頭文字は大文字にする
var HelloReact = React.createClass({
render: function () {
return (
<div>
Hello React!!
</div>
);
}
});
ReactDOM.render(
<HelloReact />,
document.querySelector(".content")
);
webpackをインストールする
webpackをyarnでインストールします。
webpackをグローバルにインストールしていない場合は、
npmでインストールします。
$ npm install -g webpack
プロジェクトディレクトリにwebpackをインストールします。
$ yarn add webpack --dev
Babel環境の準備
babel-loaderのインストール
以下のコマンドで、babel-loaderと、peerDependenciesとなっているbabel-coreをインストールします。
$ yarn add babel-loader babel-core --dev
Babelのプリセットのインストール
babel-loaderでJSXのコンパイルが行えるようにするためにbabel-preset-reactをインストールします。
$ yarn add babel-preset-react --dev
ES2015の構文に対応できるように、babel-preset-es2015をインストールします。
$ yarn add babel-preset-es2015 --dev
.babelrcファイルの設定
以下のように記述します。
{
'presets': ['react', 'es2015']
}
Reactをビルドする
webpack.config.jsファイルの設定
以下のように記述します。
module.exports = {
entry: './src/app.jsx',
output: {
path: './dist',
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js(x?)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
};
yarnコマンドへの登録
webpackコマンドを、package.jsonに以下のように記述します。
これでyarnコマンドでビルドできるようになります。
{
...
"scripts": {
"build": "webpack --progress"
},
...
}
オプションとして––watchを追加すれば監視を行ってくれます。
webpackの実行
登録した以下のコマンドで実行できます。
$ yarn run build
コマンドまとめ
打ち込んだコマンドリストです。
mkdir プロジェクト名
cd プロジェクト名
yarn init
mkdir src dist
touch ./src/app.js
touch ./index.html
touch .babelrc
touch webpack.config.js
yarn add react react-dom
yarn add webpack --dev
yarn add babel-loader babel-core --dev
yarn add babel-preset-react --dev
yarn add babel-preset-es2015 --dev