やりたいこと
- browserifyでjsをモジュール化できるよういしたい
- babelを使ってES2015で書きたい
- Reactも使いたい
- gulpはめんどい
- 変更を監視してビルドしたい
- 時間のかかるビルドは嫌だ
手順
- nodeの6系以上をインストールしておいて
npm i -g yarn
でyarnも入れておく - プロジェクトフォルダを作成する
mkdir sample-folder && cd sample-folder
-
yarn init
(適当にEnter連打) yarn add browserify babelify watchify babel-preset-es2015 babel-preset-react react react-dom babel-plugin-transform-inline-environment-variables babel-polyfill prop-types
- package.jsonのscriptsに以下を追加
"watch": "NODE_ENV=development watchify js/all.js -o js/bundle.js --extension=.jsx -v -t [ babelify --presets [ es2015 react ] --plugins [ transform-inline-environment-variables ] ]"
- コードを書く前に
npm run watch
しておく - 本番用にビルドするscript
"build": "NODE_ENV=production browserify js/all.js -o js/bundle.js --extension=.jsx -v -t [ babelify --presets [ es2015 react ] --plugins [ transform-inline-environment-variables ] ]"
サンプルのpackage.json
package.json
{
"name": "sample-folder",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-plugin-transform-inline-environment-variables": "^0.0.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.3.0",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"watchify": "^3.9.0"
},
"scripts": {
"watch": "NODE_ENV=development watchify js/all.js -o js/bundle.js --extension=.jsx -v -t [ babelify --presets [ es2015 react ] --plugins [ transform-inline-environment-variables ] ]",
"build": "NODE_ENV=production browserify js/all.js --extension=.jsx -o js/bundle.js -v -t [ babelify --presets [ es2015 react ] --plugins [ transform-inline-environment-variables ] ]"
}
}