HOME>情報備忘録>webpack、babelでreactのビルド環境構築
webpack、babelでreactのビルド環境構築
node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。
npm パッケージ インストール
下記のコマンド打つと、今だとbabel7、webpack4、react16がインストールされる。
@は公式って意味。
npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader path react react-dom webpack webpack-cli
package.json
2018.11.14現在、記録されたpackage.jsonの中身はこんな感じ
"devDependencies": {
"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"path": "^0.12.7",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
}
npm script の設定。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
"dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch"
},
webpack.config.js
ビルドするためのwebpack.config.jsの設定はこんな感じ。
const path = require('path');
module.exports = {
// モード
// development|production|none
mode: 'development',
// メインとなるJavaScriptファイル(エントリーポイント)
entry: {
"app": "./app/index.jsx",
},
// ファイルの出力設定
output: {
// 出力ディレクトリ
// __dirnameは webpack.config.js があるディレクトリの絶対パス
path: path.join(__dirname, './dist/'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
};
HTML
出来上がったjsを読み込むHTML。
./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react build</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/app.js"></script>
</body>
</html>
JSX
./app/index.jsx
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <h1>Hello React</h1>;
}
}
render(<App/>, document.getElementById('app'));
これで
を実行すると ./dist/app.js ができるはず。
index.htmlにアクセスしてHello Reactが表示されればOK。
いろいろとつまずくかと思ったけどすんなりといけてよかった。
コメント