Kaynağa Gözat

fix: 添加Webpack配置以支持Android模拟器ES5兼容性

- 在h5配置中添加esnextModules空数组
- 配置babel-loader强制转换node_modules中的ES2020+语法为ES5
- 包含ahooks、lodash-es、dayjs、antd-mobile、@ant-design、@cornerstonejs、react-query等常用库的转换规则
- 解决雷神模拟器上运行Android时不支持ES2020语法的问题

改动文件:
- config/index.ts
- CHANGELOG.md

close #83
dengdx 1 ay önce
ebeveyn
işleme
8f82a073c3
2 değiştirilmiş dosya ile 48 ekleme ve 0 silme
  1. 21 0
      CHANGELOG.md
  2. 27 0
      config/index.ts

+ 21 - 0
CHANGELOG.md

@@ -5,6 +5,27 @@
 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/),
 版本号遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [1.7.0] - 2025-12-12 17:14
+
+### 修复 (Fixed)
+- **Android模拟器ES5兼容性问题** ([config/index.ts](config/index.ts))
+  - 添加webpack配置强制转换node_modules中的ES2020+语法为ES5
+  - 解决雷神模拟器上运行Android时不支持ES2020语法的问题
+  - 配置babel-loader处理ahooks、lodash-es、dayjs、antd-mobile、@ant-design、@cornerstonejs、react-query等常用库
+  - 在h5配置中添加esnextModules空数组
+  - 设置目标环境为Chrome 91,确保良好的兼容性
+
+**技术实现:**
+- 使用webpack chain API配置force-es5规则
+- 针对特定node_modules包应用babel-loader转换
+- 配置@babel/preset-env实现ES2020+到ES5的语法降级
+- 启用useBuiltIns: 'usage'和corejs: 3实现按需polyfill
+
+**改动文件:**
+- config/index.ts
+
+---
+
 ## [1.7.0]  - 2025-12-12 14:47
 
 ### 变更 (Changed)

+ 27 - 0
config/index.ts

@@ -72,6 +72,7 @@ export default defineConfig<'webpack5'>(async (merge) => {
       },
     },
     h5: {
+      esnextModules: [],
       publicPath: './',
       staticDirectory: 'static',
       output: {
@@ -96,7 +97,33 @@ export default defineConfig<'webpack5'>(async (merge) => {
           },
         },
       },
+      // 2025.12.12 这一段解决的问题是在雷神模拟器上运行android时不支持es2020语法的问题
       webpackChain(chain) {
+        chain.module
+        .rule('force-es5')
+        .test(/\.(js|mjs)$/)
+        .include.add([
+          /node_modules[\\/]ahooks/,
+          /node_modules[\\/]lodash-es/,
+          /node_modules[\\/]dayjs/,
+          /node_modules[\\/]antd-mobile/,
+          /node_modules[\\/]@ant-design/,
+          /node_modules[\\/]@cornerstonejs/,
+          /node_modules[\\/]react-query/,
+          // ↑ 把自己项目里报错或输出 const/let 的包加进来就行
+        ])
+        .end()
+        .use('babel-loader')
+        .loader('babel-loader')
+        .options({
+          presets: [
+            ['@babel/preset-env', {
+              targets: { chrome: '91' },    // 或者 "iOS >= 9, Android >= 5"
+              useBuiltIns: 'usage',
+              corejs: 3,
+            }]
+          ]
+        });
         // ✅ 优化:配置 Webpack 持久化缓存
         chain.cache({
           type: 'filesystem',