Babelをインストールしてwebpackでビルドする

　private # なコードをビルドできた！

前回のエラー

• webpack5でprivateキーワード#がエラーになった

　上記エラーを解決するためにBabelが必要らしい。

参考

• Babelインストール

手順

インストール

npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-private-methods

ログ

npm WARN 0@1.0.0 No description
npm WARN 0@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})

+ webpack-cli@4.4.0
+ babel-loader@8.2.2
+ webpack@5.17.0
+ @babel/core@7.12.10
+ @babel/plugin-proposal-private-methods@7.12.1
+ @babel/preset-env@7.12.11
updated 6 packages and audited 641 packages in 23.495s

16 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

webpack.config.js

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                // ES2020 を ES5 に変換
                "@babel/preset-env",
              ],
              plugins: [
                // private # を使えるようにする
                "@babel/plugin-proposal-private-methods"
              ],
            },
          },
        ],
      },
    ],
  },
  // ES5(IE11等)向け
  target: ["web", "es5"],
};

　この設定に苦しんだ。適当にpluginsを上記の場所でつくったところうまくいった。

所感

　こんなの覚えられねーよ。しかもバージョン更新されるごとに作法や記法が変わりまくる。うんざりだ。

対象環境

• 2021-01-26
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release
• node 12.18.4 ※
• webpack@5.17.0
• webpack-cli@4.4.0
• babel-loader@8.2.2
• @babel/core@7.12.10
• @babel/preset-env@7.12.11
• @babel/plugin-proposal-private-methods@7.12.1

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux