k2works / etude-op10-no2

webpackを使ったNodeアプリケーションの開発

Étude Op. 10, No. 2 Chromatique

目的

webpackを使ったNodeアプリケーションの開発基盤構築

前提

ソフトウェア	バージョン	備考
node	7.3.0
npm	3.10.10
yarn	0.18.1
vagrant	1.8.7
docker	1.12.5
docker-compose	1.8.0

構成

1. 構築
2. 配置
3. 開発

構築

開発環境

vagrant up
vagrant ssh

npmパッケージセットアップ

cd /vagrant
npm init -y

Express

npm install express-generator -g
express -e .
npm install
npm start

webpack

npm install webpack@beta --save
npm install webpack-dev-server --save-dev
npm install webpack-dev-middleware --save-dev

Using css-loaders

npm install css-loader --save

Using extract-text-webpack-plugin - ExtractTextPlugin

npm install extract-text-webpack-plugin@2.0.0-rc.3 --save

Using sass-loaders

npm install node-sass sass-loader --save

Using babel-loader

npm install babel-loader babel-core babel-preset-es2015 --save

Bundle image

npm install file-loader url-loader --save

Building for Production

npm install webpack-manifest-plugin --save

npmスクリプトを追加

npm run build

http://127.0.0.0:3000で動作を確認する

⬆ back to top

配置

npm install babel-cli --save
npm install babel-preset-es2015 --save
npm install clean-webpack-plugin --save

ビルドした内容をコミットしてHerokuにデプロイする

heroku create op10-no2
git push heroku master
heroku run npm run build

⬆ back to top

開発

アプリケーション

npm install --save-dev lodash

テスト

npm install mocha --save-dev

npm install power-assert babel-plugin-espower --save
npm install babel-plugin-transform-flow-strip-types --save

.babelrcを追加

testを追加して動作を確認

npm test

⬆ back to top

参照