chore(config): 将 babel 改为 esbuild (#75)

KRISACHAN · Jun 22, 2023 · b4d76c6 · b4d76c6
1 parent 5089969
commit b4d76c6
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 950 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ## 项目信息
 
-这是一个基于 `webpack@^5.27.2` + `typescript@^4.2.3` + `@babel/core@^7.2.2` + `jest@^26.6.3` + `eslint@^7.22.0` 的多页面脚手架。
+这是一个基于 `webpack@^5.27.2` + `typescript@^4.2.3` + `esbuild-loader@^3.0.1,` + `jest@^26.6.3` + `eslint@^7.22.0` 的多页面脚手架。
 
 本库支持增量更新，支持 `gzip` 打包，支持第三方资源别名引入，支持静态文件引入，支持使用环境变量。
 
@@ -55,7 +55,6 @@ yarn prepare
 ### **项目结构**
 
 ```txt
-├─.babelrc // babel配置文件
 ├─.browserslistrc // 浏览器兼容配置
 ├─.cz-config.js // commitizen 配置
 ├─.editorconfig // 编辑器配置
@@ -340,72 +339,21 @@ precss({
 
 #### 基础方案
 
-ECMA 语法的基础方案为`@babel/preset-env`，主要配置如下：
+ECMA 语法的基础方案为 `esbuild-loader`，主要配置如下：
 
 ```javascript
-// ./.babelrc
-"presets": [
-    // 文档：https://babeljs.io/docs/babel-preset-env
-    [
-        "@babel/preset-env",
-        {
-            // 配置：https://babeljs.io/docs/options#targets
-            "targets": {
-                "esmodules": true
-            },
-            // 配置：https://babeljs.io/docs/babel-preset-env#usebuiltins
-            "useBuiltIns": "usage",
-            // 配置：https://babeljs.io/docs/babel-preset-env#corejs
-            "corejs": {
-                "version": 3,
-                "proposals": true
-            }
-        }
-    ],
-    [
-        "@babel/preset-typescript",
-        {
-            "optimizeConstEnums": true
-        }
-    ]
-],
+// ./config/webpack.config.base.js
+{
+    loader: 'esbuild-loader',
+    options: {
+        loader: 'tsx',
+        target: 'esnext',
+        tsconfig: './tsconfig.json'
+    },
+},
 ```
 
-`@babel/preset-env`文档如下：
-
-<https://babeljs.io/docs/en/babel-preset-env>
-
-#### 拓展语法
-
-可按需增删需要的 ECMA 提案插件，主要配置如下：
-
-```javascript
-// ./.babelrc
-"plugins": [
-    // 文档：https://babeljs.io/docs/babel-plugin-transform-runtime
-    "@babel/plugin-transform-runtime",
-    "@babel/plugin-transform-arrow-functions",
-    "@babel/plugin-proposal-optional-chaining",
-    [
-        "@babel/plugin-proposal-class-properties",
-        {
-            "loose": true
-        }
-    ],
-    [
-        "@babel/plugin-proposal-decorators",
-        {
-            "legacy": true
-        }
-    ],
-    [
-        "@babel/plugin-proposal-private-methods",
-        {
-            "loose": true
-        }
-    ]
-]
-```
+已用 `esbuild-loader` 代替了 `babel-loader`，在 2023 的今年，不再考虑打包到 es5 代码
 
 ### typescript
 
@@ -438,7 +386,7 @@ IS_MOBILE=false # 判断是否是移动端，如果是，则打开postcss-px-to-
 
 **jest** 测试 **dom** 时，相关代码需要包裹在 **window.onload** 里，否则会报错。例如
 
-```
+```javascript
 'use strict'
 import '@/style/index.css'
 import qrcodeImg from 'static/img/qrcode-all1.png'

diff --git a/commitlint.config.js b/commitlint.config.js
@@ -14,9 +14,11 @@ module.exports = {
                 'refactor', // 重构（既不是增加feature）,也不是修复bug
                 'pref', // 性能优化
                 'test', // 增加测试
+                'wip', // 半成品: 开发中
                 'build', // 打包
                 'ci', // 集成
                 'style', // 代码格式
+                'chore', // 构建: 变更构建流程或辅助工具
                 'revert', // 回退
             ],
         ],

diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js
@@ -100,10 +100,11 @@ const baseConfig = {
                     // https://www.npmjs.com/package/thread-loader 将下方的 loader 放入 worker 池里。每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。
                     'thread-loader',
                     {
-                        loader: 'babel-loader',
+                        loader: 'esbuild-loader',
                         options: {
-                            cacheDirectory: true,
-                            cacheCompression: true,
+                            loader: 'tsx',
+                            target: 'es2015',
+                            tsconfig: './tsconfig.json',
                         },
                     },
                 ],

diff --git a/package.json b/package.json
@@ -7,18 +7,6 @@
         "lodash-es": "^4.17.21"
     },
     "devDependencies": {
-        "@babel/core": "^7.2.2",
-        "@babel/plugin-proposal-class-properties": "^7.5.5",
-        "@babel/plugin-proposal-decorators": "^7.8.3",
-        "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-        "@babel/plugin-proposal-optional-chaining": "^7.6.0",
-        "@babel/plugin-proposal-private-methods": "^7.8.3",
-        "@babel/plugin-transform-arrow-functions": "^7.10.1",
-        "@babel/plugin-transform-runtime": "^7.2.0",
-        "@babel/preset-env": "^7.6.2",
-        "@babel/preset-typescript": "^7.6.0",
-        "@babel/runtime": "^7.9.2",
-        "@babel/runtime-corejs2": "^7.9.2",
         "@commitlint/cli": "^17.4.4",
         "@commitlint/config-conventional": "^17.4.4",
         "@types/eslint": "^7.2.1",
@@ -30,9 +18,6 @@
         "@typescript-eslint/typescript-estree": "^4.19.0",
         "acorn": "^7.1.0",
         "autoprefixer": "^10.2.5",
-        "babel-jest": "^26.3.0",
-        "babel-loader": "^8.0.5",
-        "babel-polyfill": "^6.26.0",
         "chalk": "^2.4.2",
         "clean-webpack-plugin": "^1.0.0",
         "commitizen": "^4.1.5",
@@ -45,6 +30,7 @@
         "cz-customizable": "^6.3.0",
         "dotenv": "^8.2.0",
         "es6-promise": "^4.2.5",
+        "esbuild-loader": "^3.0.1",
         "eslint": "^7.22.0",
         "eslint-config-prettier": "^6.11.0",
         "eslint-config-standard": "^14.1.1",
@@ -120,8 +106,7 @@
         "stylelint",
         "prettier",
         "lint-staged",
-        "babel",
-        "less",
+        "esbuild",
         "multiple pages"
     ],
     "author": "[email protected]",

diff --git a/tsconfig.json b/tsconfig.json
@@ -8,7 +8,7 @@
         "outDir": "./dist/",
         "noImplicitAny": true,
         "module": "ESNext",
-        "target": "ESNext",
+        "target": "ES2015",
         "allowJs": true,
         "alwaysStrict": true,
         "watch": true,