Skip to main content
Categories
フロントエンド・フレームワーク中級の学習学習

React入門その⑤ Webpackとbind(this)の撤廃

  • Post Author
    By pitang1965
  • Post Date
    Fri Jan 03 2020
adorable-baby-blur-459976

概要

  • Reactの学習を続けていてWebpackを学習し、ようやく次のようなうっとおしいコードを書かなくてよい方法を試しました。
 export default class AddOption extends React.Component {
   constructor(props) {
     super(props);
     this.handleAddOption = this.handleAddOption.bind(this); // これが嫌!
     this.state = {
       error: undefined
     }; 

   handleAddOption(e) {
     ...
   }

結論

 export default class AddOption extends React.Component {
  state = {
    error: undefined
  };
  
  handleAddOption = (e) => { 
    ...
  }
  • 上記の handleAddOption はアロー関数にしていますが、しなくてもエラーが出ない。なぜ?
  • 以下、バージョンが最新でなかったりは、機会を見て更新したいと思います。

Webpackのインストール

  • Webpackはモジュールバンドラ(多数のファイルを纏める)と呼ばれるツールの1種で、だいたい次のようなことがおこなえます。
    1. リソースを纏める
    2. 変更を関しし、タスクを再実行する
    3. Babelを用いたES5へのトランスパイル(変換)を実行できるため、ブラウザサポートを気にせず、最新のJavaScript機能を使用できる。
    4. インライン画像をデータURIに変換する(高速化)。
    5. JavaScriptからCSSを読み込むために、require()を使用できるようにする。
    6. 開発用Webサーバーを実行する。
    7. Hot Module Replacement (HMR, 稼働中のモジュール差し替え)
    8. 最初のページが巨大なJavaScriptファイルとならないよう出力ファイルを複数に分割する。
    9. Tree Shaking (使われるコードのみ残す)

インストール

> yarn add webpack webpack-cli --dev 
> yarn add webpack-dev-server
> yarn add babel-cli@6.24.1 // もっと新しい @bebel/cli がある。
> yarn add babel-core@6.25.0 // もっと新しい @babel/core がある。
> yarn add babel-loader@7.1.1
> yarn add babel-plugin-transform-class-properties

webpack.config.js

  • 例えば、webpack.config.js で次のように設定。詳細はこちら参照。
 :  
  devServer: {
    contentBase: path.join(__dirname, 'public')
  } 
: 

package.json

    "scripts": {
    "build": "webpack",
    "dev-server": "webpack-dev-server"
   },  

.babelrc

 {
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}