babel-loader 8

なんか知らぬまにupdateされていたようで、久々にreactの環境構築をしよとしたらめちゃくちゃエラー出て焦ったのでそれのメモ。
要はwebpackでreactとかをjsにトランスパイルするときによしなにやってくれるやつ。
babel coreとかと一緒にwebpackにぶち込む。

何が変わったのか

babel-loaderを使うときに今まではbabel-coreとかbabel-preset-〇〇とかを使ってたのが、8系から@babel/〇〇ってライブラリを使うようになった。
なんだそれだけかって感じかもしれないが、呼び出しのときも変わったりして意外と面倒。

なので、変えないといけないところを変えたそのまま構築できるやつを載せときます。

環境構築

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

で、必要なライブラリのインストールはおしまい。

次に、configを書いていきます。
package.jsonと同じディレクトリに

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./app.js",
  output: {
    path: path.join(__dirname, "static/js"),
    filename: "bundle.js"
  },
  resolve: {
    modules: ["node_modules"],
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ]
  }
};

これで動くはず。
変わったポイントとしては、

options: {
  presets: ["@babel/preset-env", "@babel/preset-react"]
}

ここが以前との違いです。これに気づかないと無駄に時間が溶けちゃいます。

あとはトランスパイルするだけ。

僕は普段、

package.json

"scripts": {
  "watch": "npx webpack --mode development --watch",
  "build": "npx webpack --mode production"
},

を書いて、

npm run watch

で実行しています。

これをすると保存のたびに差分でトランスパイルしてくれるので便利です。

動作確認

app.js

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

class App extends React.Component {
  render() {
    return <div>hello react!</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

index.html

<html>
    <head></head>
    <body>
        <div id="root"></div>
        <script src="./static/js/bundle.js"></script>
    </body>
</html>

npm run watchしてから127.0.0.1をブラウザで開くと、hello react!と表示されるはずです。

githubにあげてあります。

僕のブログでReactの勉強法をまとめているのでこちらもよかったら！
【progateの次はこれ！】reactの勉強手順まとめ

では、みなさんよいreactライフを〜！