HOME>情報備忘録>webpack、babelでreactのビルド環境構築

webpack、babelでreactのビルド環境構築

node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。

npm パッケージ インストール

下記のコマンド打つと、今だとbabel7、webpack4、react16がインストールされる。
@は公式って意味。

  1. 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の中身はこんな感じ

  1. "devDependencies": {
  2.     "@babel/cli": "^7.1.5",
  3.     "@babel/core": "^7.1.6",
  4.     "@babel/preset-env": "^7.1.6",
  5.     "@babel/preset-react": "^7.0.0",
  6.     "babel-loader": "^8.0.4",
  7.     "path": "^0.12.7",
  8.     "react": "^16.6.3",
  9.     "react-dom": "^16.6.3",
  10.     "webpack": "^4.25.1",
  11.     "webpack-cli": "^3.1.2"
  12. }

npm script の設定。

  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "build": "webpack --mode=production",
  4.     "dev": "webpack --mode=development",
  5.     "watch": "webpack --mode=development --watch"
  6. },

webpack.config.js

ビルドするためのwebpack.config.jsの設定はこんな感じ。

  1. const path = require('path');
  2.  
  3. module.exports = {
  4.     // モード
  5.     // development|production|none
  6.     mode: 'development',
  7.  
  8.     // メインとなるJavaScriptファイル(エントリーポイント)
  9.     entry: {
  10.         "app": "./app/index.jsx",
  11.     },
  12.  
  13.     // ファイルの出力設定
  14.     output: {
  15.         //  出力ディレクトリ
  16.         // __dirnameは webpack.config.js があるディレクトリの絶対パス
  17.         path: path.join(__dirname, './dist/'),
  18.         filename: '[name].js'
  19.     },
  20.  
  21.     module: {
  22.         rules: [
  23.             {
  24.                 test: /\.m?jsx$/,
  25.                 exclude: /(node_modules|bower_components)/,
  26.                 use: {
  27.                     loader: 'babel-loader',
  28.                     options: {
  29.                         presets: ['@babel/preset-env', '@babel/preset-react']
  30.                     }
  31.                 }
  32.             }
  33.         ]
  34.     }
  35. };

HTML

出来上がったjsを読み込むHTML。

./index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>react build</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. <script src="./dist/app.js"></script>
  10. </body>
  11. </html>

JSX

./app/index.jsx

  1. import React from 'react';
  2. import {render} from 'react-dom';
  3.  
  4. class App extends React.Component {
  5.     render () {
  6.         return <h1>Hello React</h1>;
  7.     }
  8. }
  9.  
  10. render(<App/>, document.getElementById('app'));
  11.  

これで

  1. $ npm run watch

を実行すると ./dist/app.js ができるはず。

index.htmlにアクセスしてHello Reactが表示されればOK。
いろいろとつまずくかと思ったけどすんなりといけてよかった。

参照ページ
投稿日 2018年11月15日 02:50
カテゴリ 設定 | 開発環境
タグ babel | Node.js | react | webpack
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1795

コメント

コメントする
Name
Email Address
URL