[babel][node][npm][JavaScript][react][webpack]reactでhello world

babelを使ってreactをコンパイルして、最終的な出力はwebpackにしたい。

今までの知識を総動員して下記の手順を踏んだらできた。

package.jsonを用意する。

{
  "description": "react test",
  "repository": {},
  "license": "MIT",
}

babelのインストール。

npm install -g babel-cli
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

package.jsonを修正。

{
  "description": "react test",
  "repository": {},
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  },
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  }
}

念のためjQueryをインストール。

npm install --save jquery

完了後、reactとreact-domをインストール。

npm install --save react

npm install --save react-dom

jsファイルで実装を行う。

import React from 'react';
import ReactDOM from 'react-dom';

jQuery(function($){

  ReactDOM.render(
    
Hello, world!
,
    document.getElementById('root')
  );
})

webpack.config.jsを準備する。

const webpack = require('webpack');

module.exports = {
  entry: './_build/app.1.0.0.js',
  output:{
    path:'./_dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      }
    })
  ]
}

babelコマンドでコンパイル。

babel _scr/app.1.0.0.js -o _build/app.1.0.0.js -w

webpackを実行。

webpack --watch

すると見事に表示されました。