fix: polyfill and cssrules

umijs · Jan 3, 2025 · 51dee3a · 51dee3a
1 parent 36ba1cd
commit 51dee3a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/docs/docs/docs/api/config.md b/docs/docs/docs/api/config.md
@@ -1477,6 +1477,8 @@ import SmileUrl, { ReactComponent as SvgSmile } from './smile.svg';
 - 默认值：`{ chrome: 80 }`
 
 配置需要兼容的浏览器最低版本。Umi 会根据这个自定引入 polyfill、配置 autoprefixer 和做语法转换等。
+注意：如果`package.json` 中存在 `browsersList`, 或存在 `browsersList` 配置文件, `target` 设置默认失效.
+
 
 示例，
 

diff --git a/packages/bundler-webpack/src/config/cssRules.ts b/packages/bundler-webpack/src/config/cssRules.ts
@@ -1,5 +1,6 @@
 import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
 import { winPath } from '@umijs/utils';
+import browserslist from 'browserslist';
 import type { LoaderContext } from 'mini-css-extract-plugin/types/utils';
 import { Env, IConfig } from '../types';
 
@@ -127,6 +128,17 @@ export async function addCSSRules(opts: IOpts) {
           modules: cssLoaderModulesConfig,
           ...userConfig.cssLoader,
         });
+      const browsersListConfig = browserslist.loadConfig({ path: opts.cwd });
+      const envOpts: any = {
+        autoprefixer: {
+          flexbox: 'no-2009',
+          ...userConfig.autoprefixer,
+        },
+        stage: 3,
+      };
+      if (!browsersListConfig) {
+        envOpts.browsers = opts.browsers;
+      }
 
       rule
         .use('postcss-loader')
@@ -138,14 +150,7 @@ export async function addCSSRules(opts: IOpts) {
             ident: 'postcss',
             plugins: [
               require('@umijs/bundler-webpack/compiled/postcss-flexbugs-fixes'),
-              require('postcss-preset-env')({
-                browsers: opts.browsers,
-                autoprefixer: {
-                  flexbox: 'no-2009',
-                  ...userConfig.autoprefixer,
-                },
-                stage: 3,
-              }),
+              require('postcss-preset-env')(envOpts),
             ].concat(userConfig.extraPostCSSPlugins || []),
             ...userConfig.postcssLoader,
           },

diff --git a/packages/bundler-webpack/src/config/javaScriptRules.ts b/packages/bundler-webpack/src/config/javaScriptRules.ts
@@ -4,14 +4,14 @@ import {
   VIRTUAL_ENTRY_DIR,
 } from '@umijs/mfsu';
 import { chalk, lodash, resolve } from '@umijs/utils';
+import { warn } from '@umijs/utils/dist/logger';
 import browsersList from 'browserslist';
 import { dirname, isAbsolute } from 'path';
 import { ProvidePlugin } from '../../compiled/webpack';
 import Config from '../../compiled/webpack-5-chain';
 import { MFSU_NAME } from '../constants';
 import { Env, IConfig, Transpiler } from '../types';
 import { es5ImcompatibleVersionsToPkg, isMatch } from '../utils/depMatch';
-
 interface IOpts {
   config: Config;
   userConfig: IConfig;
@@ -164,6 +164,8 @@ export async function addJavaScriptRules(opts: IOpts) {
   };
   if (!browsersListConfig) {
     options.targets = userConfig.targets;
+  } else if (userConfig.targets) {
+    warn('检测到项目中存在browsersList配置, targets 配置已失效');
   }
   srcRules.forEach((rule) => {
     if (srcTranspiler === Transpiler.babel) {

diff --git a/packages/preset-umi/src/features/polyfill/polyfill.ts b/packages/preset-umi/src/features/polyfill/polyfill.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_BROWSER_TARGETS } from '@umijs/bundler-webpack/dist/constants';
 import { getCorejsVersion, importLazy, winPath } from '@umijs/utils';
+import browsersList from 'browserslist';
 import { dirname, join } from 'path';
 import { IApi } from '../../types';
 
@@ -27,6 +28,16 @@ export default (api: IApi) => {
           .map((item: string) => `import '${item}';`)
           .join('\n')
       : `import 'core-js';`;
+    const browsersListConfig = browsersList.loadConfig({ path: api.paths.cwd });
+    const envOpts: any = {
+      useBuiltIns: 'entry',
+      corejs: getCorejsVersion(join(__dirname, '../../../package.json')),
+      modules: false,
+      ignoreBrowserslistConfig: !browsersListConfig,
+    };
+    if (!browsersListConfig) {
+      envOpts.targets = api.config.targets;
+    }
     const { transform } = babelCore;
     const { code } = transform(
       `
@@ -39,23 +50,15 @@ export {};
         presets: [
           [
             require.resolve('@umijs/bundler-utils/compiled/babel/preset-env'),
-            {
-              useBuiltIns: 'entry',
-              corejs: getCorejsVersion(
-                join(__dirname, '../../../package.json'),
-              ),
-              modules: false,
-              targets: api.config.targets,
-              ignoreBrowserslistConfig: true,
-            },
+            envOpts,
           ],
         ],
         plugins: [
           require.resolve('@umijs/babel-preset-umi/dist/plugins/lockCoreJS'),
         ],
         babelrc: false,
         configFile: false,
-        browserslistConfigFile: false,
+        browserslistConfigFile: !!browsersListConfig,
       },
     )!;