feat: support browsersList

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` 设置默认失效.
+
 
 示例，
 

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,
           },

packages/bundler-webpack/src/config/javaScriptRules.ts

@@ -4,13 +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;
@@ -124,47 +125,54 @@ export async function addJavaScriptRules(opts: IOpts) {
 
   // const prefix = existsSync(join(cwd, 'src')) ? join(cwd, 'src') : cwd;
   const srcTranspiler = userConfig.srcTranspiler || Transpiler.babel;
+  const browsersListConfig = browsersList.loadConfig({ path: cwd });
+  const options: any = {
+    // Tell babel to guess the type, instead assuming all files are modules
+    // https://github.com/webpack/webpack/issues/4039#issuecomment-419284940
+    sourceType: 'unambiguous',
+    babelrc: false,
+    configFile: false,
+    cacheDirectory: false,
+    browserslistConfigFile: !!browsersListConfig,
+    // process.env.BABEL_CACHE !== 'none'
+    //   ? join(cwd, `.umi/.cache/babel-loader`)
+    //   : false,
+    // targets: userConfig.targets,
+    // 解决 vue MFSU 解析 需要
+    customize: userConfig.babelLoaderCustomize,
+    presets: [
+      opts.babelPreset || [
+        require.resolve('@umijs/babel-preset-umi'),
+        {
+          presetEnv: {},
+          presetReact: {},
+          presetTypeScript: {},
+          pluginTransformRuntime: {},
+          pluginLockCoreJS: {},
+          pluginDynamicImportNode: false,
+          pluginAutoCSSModules: userConfig.autoCSSModules,
+        },
+      ],
+      ...opts.extraBabelPresets,
+      ...(userConfig.extraBabelPresets || []).filter(Boolean),
+    ],
+    plugins: [
+      useFastRefresh && require.resolve('react-refresh/babel'),
+      ...opts.extraBabelPlugins,
+      ...(userConfig.extraBabelPlugins || []),
+    ].filter(Boolean),
+  };
+  if (!browsersListConfig) {
+    options.targets = userConfig.targets;
+  } else if (userConfig.targets) {
+    warn('检测到项目中存在browsersList配置, targets 配置已失效');
+  }
   srcRules.forEach((rule) => {
     if (srcTranspiler === Transpiler.babel) {
       rule
         .use('babel-loader')
         .loader(require.resolve('../../compiled/babel-loader'))
-        .options({
-          // Tell babel to guess the type, instead assuming all files are modules
-          // https://github.com/webpack/webpack/issues/4039#issuecomment-419284940
-          sourceType: 'unambiguous',
-          babelrc: false,
-          configFile: false,
-          cacheDirectory: false,
-          browserslistConfigFile: false,
-          // process.env.BABEL_CACHE !== 'none'
-          //   ? join(cwd, `.umi/.cache/babel-loader`)
-          //   : false,
-          targets: userConfig.targets,
-          // 解决 vue MFSU 解析 需要
-          customize: userConfig.babelLoaderCustomize,
-          presets: [
-            opts.babelPreset || [
-              require.resolve('@umijs/babel-preset-umi'),
-              {
-                presetEnv: {},
-                presetReact: {},
-                presetTypeScript: {},
-                pluginTransformRuntime: {},
-                pluginLockCoreJS: {},
-                pluginDynamicImportNode: false,
-                pluginAutoCSSModules: userConfig.autoCSSModules,
-              },
-            ],
-            ...opts.extraBabelPresets,
-            ...(userConfig.extraBabelPresets || []).filter(Boolean),
-          ],
-          plugins: [
-            useFastRefresh && require.resolve('react-refresh/babel'),
-            ...opts.extraBabelPlugins,
-            ...(userConfig.extraBabelPlugins || []),
-          ].filter(Boolean),
-        });
+        .options(options);
     } else if (srcTranspiler === Transpiler.swc) {
       rule
         .use('swc-loader')

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,
       },
     )!;