【Reactを始める方法】第6回 設定編 - Babel
Reactを始める方法
tags: node
react
babel
webpack
【Reactを始める方法】第6回 設定編 - Babel
連載の記事
- 【Reactを始める方法】目次
- 【Reactを始める方法】第1回 準備
- 【Reactを始める方法】第2回 インストール編 - Webpack
- 【Reactを始める方法】第3回 インストール編 - Babel
- 【Reactを始める方法】第4回 インストール編 - React
- 【Reactを始める方法】第5回 設定編 - Webpack
- 【Reactを始める方法】第6回 設定編 - Babel
- 【Reactを始める方法】第7回 実装編 - HelloWorld
今回やること
- Babel の設定ファイルを作る
Babelの設定ファイル
Babelの設定ファイルを作る。
type nul > .babelrc
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "react-hot-loader/babel", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-syntax-import-meta", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-json-strings", [ "@babel/plugin-proposal-decorators", { "legacy": true } ], "@babel/plugin-proposal-function-sent", "@babel/plugin-proposal-export-namespace-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-throw-expressions" ] }
package.json
起動のための script を追加します。
{ ... "scripts": { "develop": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js", }, ... }
追加したコマンドについて
このタイミングでは、まだ使えないですけど…
- 開発環境で起動するコマンド
npm run develop
- 本番環境に配置するためにビルドするコマンド
npm run build
これで Babel の設定は完了です。
次回は いよいよReactで実装をしていきます。