ReactをES2015で書く環境を作る その2

2017年06月21日 · 1 min read · JavaScript React  ·
Share on:

はじめに

大体その1と同じ内容
ReactRouter入れたりくらいの変更
webpackも変遷の中で今微妙とかなんとか聞くけどとりあえずこれで…

目標

ReactとReact RouterとMaterial UIを入れてES2015で書ける環境を作る

環境構築

プロジェクト作成

1$ npm init -yes

パッケージを揃える

react-routerがv3からv4に変わる過程でreact-router-domになったので注意する

1$ npm install --save react react-dom material-ui react-router-dom
2$ npm install --save-dev webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-es2015

webpack.config.js

とりあえずこんな感じで
minifyする際にオプションを追加する必要があるけど今のところは置いておくのでこんな感じ

 1var path = require("path");
 2var webpack = require("webpack");
 3
 4module.exports = {
 5    entry: "./src/main.jsx",
 6    output: { path: path.join(__dirname, "dist"), filename: "bundle.js" },
 7    module: {
 8        loaders: [{
 9            test: /.jsx?$/,
10            loader: "babel-loader",
11            exclude: /node_modules/,
12            query: {
13                presets: ["es2015", "react"]
14            }
15        }]
16    }
17}