feat(bundler): Migrate babel -> esbuild

- Migrate transpiler: babel -> esbuild
- Update related plugins: css-minimizer-webpack-plugin, terser-webpack-plugin -> esbuild built-in

Fix #3601

README.md

@@ -170,16 +170,12 @@ If you want to use 'billboard.js' without installation, load files directly from
 
 ## Supported Browsers
 
-> - Basically will work on all SVG supported browsers.
+> - Basically will work on all SVG and ES6+ supported browsers.
 > - <sup>*</sup>Notes for legacy browsers:
 >   - Recommended to use `packaged` build or construct your own build following [`How to bundle for legacy browsers?`](https://github.com/naver/billboard.js/wiki/How-to-bundle-for-legacy-browsers%3F) instruction.
 >   - D3.js dropped the support of legacy browsers since [v6](https://observablehq.com/@d3/d3v6-migration-guide).
 >   - The support isn't fully guaranteed.
 
-|Internet Explorer|Chrome|Firefox|Safari|iOS|Android|
-|---|---|---|---|---|---|
-|9+<sup>*</sup>|Latest|Latest|Latest|8+|4+|
-
 
 ## Dependency by version
 

config/rollup/esm.js

@@ -1,5 +1,4 @@
 import {readdirSync} from "fs";
-import babel from '@rollup/plugin-babel';
 import typescript from "@rollup/plugin-typescript";
 import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
@@ -26,9 +25,6 @@ const plugins = [
         runOnce: true
     }),
     resolve(),
-    babel({
-        babelHelpers: "runtime"
-    }),
     typescript(),
     replace({
         "__VERSION__": version,

config/webpack/packaged.cjs

@@ -1,9 +1,7 @@
 const {merge} = require("webpack-merge");
 const webpack = require("webpack");
-const TerserPlugin = require("terser-webpack-plugin");
-const terserConfig = require("../terserConfig.cjs");
 const banner = require("../template/banner.cjs");
-
+const {EsbuildPlugin} = require("esbuild-loader");
 
 const config = {
 	entry: {
@@ -13,7 +11,13 @@ const config = {
 	optimization: {
 		usedExports: true,
 		minimize: true,
-		minimizer: [new TerserPlugin(terserConfig)]
+		minimizer: [
+			new EsbuildPlugin({
+				include: /\.min\.js$/,
+				target: "es2015",
+				format: undefined
+			})
+		]
 	},
 	plugins: [
 		new webpack.BannerPlugin({

config/webpack/plugin.cjs

@@ -3,9 +3,8 @@ const webpack = require("webpack");
 const fs = require("fs");
 const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
-const TerserPlugin = require("terser-webpack-plugin");
-const terserConfig = require("../terserConfig.cjs");
 const banner = require("../template/banner.cjs");
+const {EsbuildPlugin} = require("esbuild-loader");
 
 const srcPath = "./src/Plugin/";
 const distPath = path.resolve(__dirname, "../../dist/plugin/");
@@ -68,7 +67,12 @@ module.exports = (common, env) => {
 		config.optimization = {
 			usedExports: true,
 			minimize: true,
-			minimizer: [new TerserPlugin(terserConfig)]
+			minimizer: [
+				new EsbuildPlugin({
+					target: "es2015",
+					format: undefined
+				})
+			]
 		};
 	}
 

config/webpack/production.cjs

@@ -2,10 +2,8 @@ const {merge} = require("webpack-merge");
 const webpack = require("webpack");
 const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
-const TerserPlugin = require("terser-webpack-plugin");
-const terserConfig = require("../terserConfig.cjs");
 const banner = require("../template/banner.cjs");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const {EsbuildPlugin} = require("esbuild-loader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ESLintPlugin = require("eslint-webpack-plugin");
 
@@ -32,16 +30,11 @@ const config = {
 		usedExports: true,
 		minimize: true,
 		minimizer: [
-			new TerserPlugin(terserConfig),
-			new CssMinimizerPlugin({
-				test: /\.min\.css$/i,
-				minimizerOptions: {
-					preset: [
-						"default", {
-							discardComments: true
-						}
-					]
-				}
+			new EsbuildPlugin({
+				include: /\.min\.(js|css)$/,
+				target: "es2015",
+				css: true,
+				format: undefined
 			})
 		]
 	},

config/webpack/theme.cjs

@@ -5,7 +5,7 @@ const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
 const WebpackCleanPlugin = require("webpack-clean");
 const banner = require("../template/banner.cjs");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const {EsbuildPlugin} = require("esbuild-loader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const srcPath = "./src/scss/theme/";
@@ -47,15 +47,11 @@ const config = {
 	optimization: {
 		minimize: true,
 		minimizer: [
-			new CssMinimizerPlugin({
-				test: /\.min\.css$/i,
-				minimizerOptions: {
-					preset: [
-						"default", {
-							discardComments: true
-						}
-					]
-				}
+			new EsbuildPlugin({
+				include: /\.min\.css$/,
+				target: "es2015",
+				css: true,
+				format: undefined
 			})
 		]
 	},

karma.conf.cjs

@@ -64,8 +64,11 @@ module.exports = function(config) {
 						}
 					},
 					{
-						test: /(\.[jt]s)$/,
-						loader: "babel-loader",
+						test: /\.[jt]s$/,
+						loader: "esbuild-loader",
+						options: {
+							target: "es2015"
+						},
 						exclude: {
 							and: [/node_modules/],
 							not: [/(d3\-.*)$/, /internmap/]

package.json

@@ -101,17 +101,8 @@
 		"d3-zoom": "^3.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.24.0",
-		"@babel/eslint-parser": "^7.23.10",
-		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-		"@babel/plugin-transform-runtime": "^7.24.0",
-		"@babel/preset-env": "^7.24.0",
-		"@babel/preset-typescript": "^7.23.3",
-		"@babel/runtime": "^7.24.0",
-		"@commitlint/cli": "19.0.3",
-		"@commitlint/config-conventional": "^19.0.3",
-		"@rollup/plugin-babel": "^6.0.4",
+		"@commitlint/cli": "18.6.1",
+		"@commitlint/config-conventional": "^18.6.2",
 		"@rollup/plugin-node-resolve": "^15.2.3",
 		"@rollup/plugin-replace": "^5.0.5",
 		"@rollup/plugin-typescript": "^11.1.6",
@@ -125,19 +116,8 @@
 		"@types/d3": "^7.4.3",
 		"@types/mocha": "^10.0.6",
 		"@types/sinon": "^17.0.3",
-		"@typescript-eslint/eslint-plugin": "^7.2.0",
-		"@typescript-eslint/parser": "^7.2.0",
-		"babel-helper-modules": "^6.0.0",
-		"babel-loader": "^9.1.3",
-		"babel-plugin-add-module-exports": "^1.0.4",
-		"babel-plugin-minify-constant-folding": "^0.5.0",
-		"babel-plugin-minify-dead-code-elimination": "^0.5.2",
-		"babel-plugin-minify-guarded-expressions": "^0.4.4",
-		"babel-plugin-minify-numeric-literals": "^0.4.3",
-		"babel-plugin-minify-type-constructors": "^0.4.3",
-		"babel-plugin-transform-inline-consecutive-adds": "^0.4.3",
-		"babel-plugin-transform-merge-sibling-variables": "^6.9.5",
-		"babel-plugin-transform-minify-booleans": "^6.9.4",
+		"@typescript-eslint/eslint-plugin": "^7.1.0",
+		"@typescript-eslint/parser": "^7.1.0",
 		"better-docs": "^2.7.3",
 		"chai": "^4.3.10",
 		"clean-webpack-plugin": "^4.0.0",
@@ -146,12 +126,12 @@
 		"coveralls": "^3.1.1",
 		"cross-env": "^7.0.3",
 		"css-loader": "^6.10.0",
-		"css-minimizer-webpack-plugin": "^6.0.0",
 		"d3-color": "^3.1.0",
 		"d3-delaunay": "^6.0.4",
 		"d3-format": "^3.1.0",
 		"d3-polygon": "^3.0.1",
 		"docdash": "^2.0.2",
+		"esbuild-loader": "^4.0.3",
 		"eslint": "^8.57.0",
 		"eslint-config-naver": "^2.1.0",
 		"eslint-plugin-import": "^2.29.1",
@@ -188,7 +168,6 @@
 		"string-replace-loader": "^3.1.0",
 		"style-loader": "^3.3.4",
 		"taffydb": "^2.7.3",
-		"terser-webpack-plugin": "^5.3.10",
 		"tslib": "^2.6.2",
 		"typescript": "5.4.2",
 		"webpack": "^5.90.3",

test/api/chart-spec.ts

@@ -111,7 +111,7 @@ describe("API chart", () => {
 			// all methods should be ressetted
 			Object.keys(chart).forEach(key => {
 				expect(chart[key]()).to.be.undefined;
-				expect(/^function()/.test(chart[key].toString())).to.be.true;
+				expect(/^\(\)\s?=\>\s?\{/.test(chart[key].toString())).to.be.true;
 			});
 
 			expect(bb.instance.indexOf(chart) === -1).to.be.true;

test/interactions/subchart-spec.ts

@@ -581,6 +581,8 @@ describe("SUBCHART", () => {
 					expect(
 						this.internal.$el.subchart.main.selectAll(`.${$LINE.line}-data1`).size()
 					).to.be.equal(1);
+
+					done();
 				}
 			});
 		});
@@ -602,6 +604,8 @@ describe("SUBCHART", () => {
 					expect(
 						main.selectAll(`.${$LINE.line}-data2`).size()
 					).to.be.equal(1);
+
+					done();
 				}
 			});
 		});

test/shape/arc-spec.ts

@@ -717,15 +717,15 @@ describe("SHAPE ARC", () => {
 			checkExpand(done);
 		});
 
-		it("set options: data.type='donut'", done => {
+		it("set options: data.type='donut'", () => {
 			args.data.type = "donut";
 		});
 
 		it("check Donut's expand", done => {
 			checkExpand(done);
 		});
 
-		it("set options: data.type='gauge'", done => {
+		it("set options: data.type='gauge'", () => {
 			args.data.type = "donut";
 		});
 

webpack.config.cjs

@@ -44,8 +44,11 @@ const config = {
 	module: {
 		rules: [
 			{
-				test: /(\.[jt]s)$/,
-				loader: "babel-loader",
+				test: /\.[jt]s$/,
+				loader: "esbuild-loader",
+				options: {
+					target: "es2015"
+				},
 				exclude: {
 					and: [/node_modules/],
 					not: [/(d3\-.*)$/, /internmap/]