Edited at

React16 jsx 最小構成のビルド環境 WebPack

More than 1 year has passed since last update.


関連記事

React16 最小構成のビルド環境 browserify babelify JSXあり - Qiita

https://qiita.com/standard-software/items/fa64563077118b631867

この記事の続きみたいなものです。

ビルドツールを Browserify から WebPack に変えました。


環境

環境は Windows10 です。 node.js インストール済みとします。

Mac でも同じだと思います。


インストール

フォルダを作成して、そこをカレントディレクトリにしてコマンドを打ちましょう。

  npm init -y

npm install --save react
npm install --save react-dom
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react
npm install --save-dev webpack
npm install --save-dev webpack-cli

フォルダに、package.json が作られてその中身の一部はこのようになります。

  "devDependencies": {

"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
},
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0"
}


ファイル

次の構成にします。作成されたフォルダの中に次のファイルがある状態にしてください。

  index.html

.babelrc
development.js
webpack.config.js
src フォルダ
hello.jsx
build フォルダ
build.js

build.js は WebPack によって生成されます。


index.html

<!DOCTYPE html>

<html>
<head>
</head>
<body>
<div id="app01"></div>
<div id="app02"></div>
<script src="./build/build.js"></script>
</body>
</html>


hello.jsx

const React = require('react');

const ReactDOM = require('react-dom');

class HelloWorld extends React.Component {
render() {
return <div>Hello World {this.props.name}</div>;
}
}

const hwElement = <HelloWorld name="01" />;
ReactDOM.render(hwElement,
document.getElementById('app01'));

const hwFactory = React.createFactory(HelloWorld);
ReactDOM.render(
hwFactory({name: '02'}),
document.getElementById('app02')
);


Babel用の設定ファイルを用意します。


.babelrc

{

"presets": ["env", "react"],
}

WebPack用の設定ファイルを用意します。


webpack.config.js

require('babel-core/register'); 

module.exports = require('./development');


development.js

import path from 'path'

const src = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'build')

export default {
entry: src + '/hello.jsx',

output: {
path: dist,
filename: 'build.js'
},

module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},

plugins: []
}



実行

ビルドコマンドは次のとおりです。決めたフォルダをカレントディレクトリにしてコマンド実行してください。

オプションなどを設定しなくても webpack.config.js をデフォルトで読み取ってそのとおりに動作します。

>.\node_modules\.bin\webpack

実行結果は次のとおりになります。

<body>

<div id="app01"><div data-reactroot="">Hello World 01</div></div>
<div id="app02"><div data-reactroot="">Hello World 02</div></div>

これで、Babel を使って ES の最新と React の変換を行えます。


GitHub

2018/04/08追記

少しソースコードをシンプルにして次の場所に配置しました。

https://github.com/standard-software/React_Hello-World_Sample

CDN版 Reactのみ / React+JSX

Browserify版 Reactのみ / React+JSX Reactify / React+JSX Babelify

WebPack版 Reactのみ / React+JSX

これらが全て含まれています。