[WIP] 升级至 node20 及 typescript5

.circleci/config.yml

@@ -1,17 +1,17 @@
+version: 2.1
+
 workflows:
-    version: 2
     build:
         jobs:
-            - build_node_12
-            - build_node_14
-            - build_node_16
+            - build_node_18
+            - build_node_20
+            - build_node_22
 
-version: 2
 jobs:
     base: &base
         working_directory: ~/workspace
         docker:
-            - image: cimg/node:12.18.2
+            - image: cimg/node:18.20.3
         steps:
             - checkout
             - restore_cache:
@@ -28,17 +28,17 @@ jobs:
                 paths:
                     - "node_modules"
 
-    build_node_12:
+    build_node_18:
         <<: *base
         docker:
-        - image: cimg/node:12.18.2
+            - image: cimg/node:18.20.3
 
-    build_node_14:
+    build_node_20:
         <<: *base
         docker:
-        - image: cimg/node:14.17.0
+            - image: cimg/node:20.14.0
 
-    build_node_16:
+    build_node_22:
         <<: *base
         docker:
-        - image: cimg/node:16.1.0
+            - image: cimg/node:22.2.0

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.18.2
+FROM node:20.14.0
 LABEL maintainer="nighca@live.cn"
 
 WORKDIR /fec

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fec-builder",
-  "version": "2.7.2",
+  "version": "3.0.0",
   "bin": {
     "fec-builder": "./lib/bin.js"
   },
@@ -12,70 +12,67 @@
     "lint": "tsc --noEmit"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=18"
   },
   "dependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.24.7",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/runtime-corejs3": "^7.12.5",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@babel/plugin-proposal-decorators": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/runtime-corejs3": "^7.24.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@svgr/webpack": "^5.5.0",
-    "@swc/core": "^1.3.14",
-    "@swc/helpers": "^0.4.12",
-    "babel-loader": "^8.2.1",
-    "copy-webpack-plugin": "^6.3.1",
-    "core-js": "^3.7.0",
-    "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.3.0",
+    "@swc/core": "^1.6.1",
+    "@swc/helpers": "^0.5.11",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.37.1",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "del": "^6.0.0",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "5.6.0",
     "image-minimizer-webpack-plugin": "^2.2.0",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-svgo": "^9.0.0",
-    "immer": "^8.0.3",
+    "immer": "^9.0.6",
     "jsonc-parser": "^3.2.0",
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
     "lodash": "^4.17.20",
-    "log4js": "^6.3.0",
-    "mini-css-extract-plugin": "^1.3.9",
+    "log4js": "^6.9.1",
+    "mini-css-extract-plugin": "^2.9.0",
     "mustache": "^4.2.0",
     "picocolors": "^1.1.1",
-    "postcss-loader": "^4.3.0",
-    "postcss-preset-env": "~7.2.3",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "~9.5.14",
     "qiniu": "^7.3.2",
-    "react-refresh": "^0.9.0",
+    "react-refresh": "^0.14.2",
     "semver": "^7.3.2",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^2.0.0",
-    "swc-loader": "^0.2.3",
-    "ts-loader": "^9.2.4",
-    "typescript": "~4.1.3",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "swc-loader": "^0.2.6",
+    "ts-loader": "^9.5.1",
+    "typescript": "~5.4.5",
     "walk": "^2.3.14",
-    "webpack": "^5.52.0",
-    "webpack-bundle-analyzer": "^4.4.1",
+    "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-server": "^3.11.3",
-    "webpackbar": "^5.0.2",
-    "yargs": "^16.1.1"
+    "webpackbar": "^6.0.1",
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/copy-webpack-plugin": "^6.3.0",
-    "@types/css-minimizer-webpack-plugin": "^1.1.1",
     "@types/lodash": "^4.14.165",
-    "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/mustache": "^4.2.2",
     "@types/postcss-preset-env": "^7.7.0",
     "@types/semver": "^7.3.4",
     "@types/walk": "^2.3.0",
-    "@types/webpack-bundle-analyzer": "^4.4.0",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/webpack-dev-server": "^3.11.1",
-    "@types/yargs": "^15.0.9",
-    "ts-node": "^9.1.1"
+    "@types/yargs": "^17.0.32",
+    "ts-node": "^10.9.2"
   },
   "license": "Apache-2.0",
   "repository": {

src/serve.ts

@@ -7,7 +7,7 @@ import fs from 'fs'
 import url from 'url'
 import webpack from 'webpack'
 import WebpackDevServer from 'webpack-dev-server'
-import { Config as ProxyConfig } from 'http-proxy-middleware'
+import { Options as ProxyConfig } from 'http-proxy-middleware'
 import logger from './utils/logger'
 import { getPageFilename, getPathFromUrl, logLifecycle, watchFile } from './utils'
 import { getConfigForDevServer } from './webpack'

src/utils/webpack.ts

@@ -112,29 +112,24 @@ export function parseOptimizationConfig(optimization: Optimization): {
   const baseChunks: string[] = []
   const cacheGroups: SplitChunksCacheGroups = {}
 
-  if (extractVendor) {
-    if (typeof extractVendor === 'string') {
-      throw new Error('BREAKING CHANGE: extractVendor 已不再支持该用法，使用方式请参考帮助文档！')
-    } else if (typeof extractVendor === 'boolean' || extractVendor.length > 0) {
-      baseChunks.push(chunks.vendor)
-
-      cacheGroups[chunks.vendor] = {
-        name: chunks.vendor,
-        chunks: 'initial',
-        priority: -10,
-        test: function(module: { resource?: string }): boolean {
-          const resource = module.resource
-          if (!resource) return false
-
-          const nodeModulesPath = path.join(path.sep, 'node_modules', path.sep)
-          if (typeof extractVendor === 'boolean') {
-            return resource.includes(nodeModulesPath)
-          }
-
-          return extractVendor.some(packageName => {
-            return resource.includes(path.join(nodeModulesPath, packageName, path.sep))
-          })
+  if (extractVendor && (typeof extractVendor === 'boolean' || extractVendor.length > 0)) {
+    baseChunks.push(chunks.vendor)
+    cacheGroups[chunks.vendor] = {
+      name: chunks.vendor,
+      chunks: 'initial',
+      priority: -10,
+      test: function(module: { resource?: string }): boolean {
+        const resource = module.resource
+        if (!resource) return false
+
+        const nodeModulesPath = path.join(path.sep, 'node_modules', path.sep)
+        if (typeof extractVendor === 'boolean') {
+          return resource.includes(nodeModulesPath)
         }
+
+        return extractVendor.some(packageName => {
+          return resource.includes(path.join(nodeModulesPath, packageName, path.sep))
+        })
       }
     }
   }

src/webpack/transform.ts

@@ -147,6 +147,7 @@ function addTransform(
         options: {
           // https://github.com/webpack-contrib/css-loader/issues/228#issuecomment-312885975
           importLoaders: transform.transformer === Transform.Css ? 1 : 0,
+          esModule: false,
           modules: (
             transformConfig.modules
             ? { localIdentName: '[local]_[hash:base64:5]' }