Windowsで構築する用途がでてきたため、メモ的に。
1.nodeのインストール（nodistでnodeのバージョン管理）
・nodistのインストール
(1)下記よりインストーラーをダウンロード
https://github.com/marcelklehr/nodist/releases
※2016/12/27時点での最新は「NodistSetup-v0.8.8.exe」
(2)ダウンロードしたらexeを実行し、インストール
(3)コマンドプロンプトを起動し、確認
nodist -v
バージョンが出ればOK。使い方は下記URLを参照
https://github.com/marcelklehr/nodist/blob/master/usage.txt
・nodeのインストール
(1)インストールできるnodeを確認
nodist ds
(2)現在は6系がLTS(Long-term Support)なので、6系をインストール
nodist 6.x
(3)nodeがインストールできているか確認
nodist list
6.9.2 (global: 6.x)が表示されればOK
nodeコマンドでも確認
node -v
v6.9.2が表示されればOK
もし、バージョンがでない場合は、下記を実行
nodist global 6.9.2
・npmのアップデート（nodeのパッケージ管理）
(1)現在のバージョンの確認
npm --version
(2)アップデートを実行
npm update -g npm
(3)再度(1)でバージョンを確認
2.webpackやreact等のバッケージのインストールと設定
フォルダ構成は以下の通り。
- webpack-sample
- src (npm runを実行するフォルダ)
- js (コンパイル元のjs)
+ app.js
+ counter.js
- sass (コンパイル元のsass)
+ app.scss
+ _variables.scss
- public
+ js (jsのコンパイル先のフォルダ)
+ css (sassのコンパイル先のフォルダ)
+ index.html
+ package.json
+ webpack.config.js
+ bs-config.js（browsersync）
(1)プロジェクトのnodeバージョンを固定するのとpackage.jsonの作成
cd webpack-sample
nodist local 6.9.2
npm init
// あとはとりあえずEnterで
(2)webpackのインストール
npm install --save-dev webpack
(3)reactのインストール
npm install --save react react-dom
(4)babelとプリセットのインストール
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
(5)sass関係のインストール（必要なら）
npm install --save-dev extract-text-webpack-plugin css-loader sass-loader style-loader node-sass
(6)BrowserSyncのインストール（簡易サーバーとライブリロードで。必要なら）
npm install --save-dev browser-sync concurrently
(7)webpack.config.jsの作成
webpack-sampleフォルダ配下にwebpack.config.jsファイルを作成し、以下の内容を記述
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
{
context: path.join(__dirname, 'src/js'),
entry: {
app: './app.js'
},
output: {
path: path.join(__dirname, 'public/js'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel",
query:{
presets: ['react', 'es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
},
{
context: path.join(__dirname, 'src/sass'),
entry: {
app: './app.scss'
},
output: {
path: path.join(__dirname, 'public/css'),
filename: '[name].css'
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&sourceMap&minimize!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true')
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
}
];
(8)BrowserSyncのconfigファイル作成と設定（必要なら）
webpack-sampleフォルダで以下を実行
node_modules\.bin\browser-sync init
作成されたbs-config.jsの以下の部分を修正
"files": false → "files": "./public/**/*"
"server": false → "server": {
"baseDir": "./public"
}
"browser": "default" → "browser": "Chrome" # お好きなブラウザを。windowsのchrome場合は左記。macの場合はgoogle chromeかな
(9)package.jsonのscriptsにコマンドを追加
以下、package.jsonの内容
{
"name": "webpack-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -p --progress",
"watch": "webpack -d --watch --progress",
"browsersync": "browser-sync start --config bs-config.js",
"start": "concurrent \"npm run watch\" \"npm run browsersync\""
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"browser-sync": "^2.18.5",
"concurrently": "^3.1.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^4.1.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
}
}
3.コンパイルやファイル監視などの実行
webpack-sampleフォルダで用途に応じて、以下を実行
npm run build → 本番用にビルド。圧縮とかをしてくれる。
npm run watch → ファイルを監視して、変更があったら、開発用にビルド。sourceMapの作成等してくれる
npm run start → 上記のnpm run watchに加え、Webサーバーの起動とライブリロードを実施する
4.今後
以下のURLでは、BrowserSyncに加え、HotModuleReplacementPluginの記述もあるので、scssも含めできるか試してみたい。
http://uraway.hatenablog.com/entry/2016/03/25/034706