webpack + Babel で ES6 -> ES5 へトランスパイル/変換する方法

webpack + Babel で ES6 から　ES5 へトランスパイル/変換する方法をご紹介します。

背景 k6 は ES5 で実行した方が高速

前提最新版だと動作しない

各種パッケージの最新版だとしなかったので以下の記事のバージョンに固定して利用しました。

ES6 -> ES5

package.json

{
  "scripts": {
    "to-es5": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "babel-loader": "^8.2.2",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0"
  },
  "private": true
}

webpack.config.js

const path = require('path');

const args = process.argv.slice(2);
const inputFileName = args[0];
const outputFilename = path.basename(inputFileName, path.extname(inputFileName)) + '.js';

module.exports = {
  mode: "production",
  entry: inputFileName,
  output: {
    filename: outputFilename,
    libraryTarget: "commonjs",
    path: `${__dirname}/dist`
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
              ],
            },
          },
        ],
      },
    ],
  },
  target: ["web", "es5"],
  externals: /^k6(/.*)?/
};

実行方法 `npm run to-es5 filename.js`

npm run to-es5 your-es6-file.js

以上、webpack + Babel で ES5 へトランスパイルした、現場からお送りしました。

背景 k6 は ES5 で実行した方が高速

前提 最新版だと動作しない

ES6 -> ES5

package.json

webpack.config.js

実行方法 npm run to-es5 filename.js

参考情報

前提最新版だと動作しない

実行方法 `npm run to-es5 filename.js`