feat: support browsersList

umijs · Dec 30, 2024 · 3e7732d · 3e7732d
1 parent e537130
commit 3e7732d
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "@types/minimatch": "3.0.5",
     "@types/node": "^18.15.13",
     "@umijs/test": "^4.0.68",
+    "browserslist": "^4.24.3",
     "git-repo-info": "^2.1.1",
     "husky": "^8.0.3",
     "jest": "^27",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/builder/bundle/index.ts b/src/builder/bundle/index.ts
@@ -1,5 +1,6 @@
 import type { webpack } from '@umijs/bundler-webpack';
 import { chalk, importLazy, lodash } from '@umijs/utils';
+import browsersList from 'browserslist';
 import path from 'path';
 import { getCachePath, logger } from '../../utils';
 import type { BundleConfigProvider } from '../config';
@@ -57,39 +58,53 @@ async function bundle(opts: IBundleOpts): Promise<void | IBundleWatcher> {
         { leading: true, trailing: false },
       );
 
+      const buildConfig: any = {
+        alias: config.alias,
+        autoprefixer: config.autoprefixer,
+        chainWebpack: config.chainWebpack,
+        define: config.define,
+        devtool: config.sourcemap && 'source-map',
+        externals: config.externals,
+        outputPath: config.output.path,
+
+        // postcss config
+        extraPostCSSPlugins,
+        postcssLoader,
+
+        ...(config.extractCSS !== false ? {} : { styleLoader: {} }),
+
+        // less config
+        theme: config.theme,
+
+        // compatible with IE11 by default
+        // targets: getBundleTargets(config),
+        jsMinifier: JSMinifier.terser,
+        cssMinifier: CSSMinifier.cssnano,
+        extraBabelIncludes: [/node_modules/],
+
+        // set cache parent directory, will join it with `bundler-webpack`
+        // ref: https://github.com/umijs/umi/blob/8dad8c5af0197cd62db11f4b4c85d6bc1db57db1/packages/bundler-webpack/src/build.ts#L32
+        cacheDirectoryPath: getCachePath(),
+      };
+
+      let presetEnv: any = {};
+      const browsersListConfig = browsersList.loadConfig({
+        path: process.cwd(),
+      });
+      if (browsersListConfig) {
+        presetEnv.ignoreBrowserslistConfig = false;
+        presetEnv.useBuiltIns = 'entry';
+      } else {
+        const targets = getBundleTargets(config);
+        presetEnv.targets = targets;
+        buildConfig.targets = targets;
+      }
       // log for normal build
       !opts.watch && logStatus();
       await bundler.build({
         cwd: opts.cwd,
         watch: opts.watch,
-        config: {
-          alias: config.alias,
-          autoprefixer: config.autoprefixer,
-          chainWebpack: config.chainWebpack,
-          define: config.define,
-          devtool: config.sourcemap && 'source-map',
-          externals: config.externals,
-          outputPath: config.output.path,
-
-          // postcss config
-          extraPostCSSPlugins,
-          postcssLoader,
-
-          ...(config.extractCSS !== false ? {} : { styleLoader: {} }),
-
-          // less config
-          theme: config.theme,
-
-          // compatible with IE11 by default
-          targets: getBundleTargets(config),
-          jsMinifier: JSMinifier.terser,
-          cssMinifier: CSSMinifier.cssnano,
-          extraBabelIncludes: [/node_modules/],
-
-          // set cache parent directory, will join it with `bundler-webpack`
-          // ref: https://github.com/umijs/umi/blob/8dad8c5af0197cd62db11f4b4c85d6bc1db57db1/packages/bundler-webpack/src/build.ts#L32
-          cacheDirectoryPath: getCachePath(),
-        },
+        config: buildConfig,
         entry: {
           [path.parse(config.output.filename).name]: path.join(
             opts.cwd,
@@ -99,9 +114,7 @@ async function bundle(opts: IBundleOpts): Promise<void | IBundleWatcher> {
         babelPreset: [
           require.resolve('@umijs/babel-preset-umi'),
           {
-            presetEnv: {
-              targets: getBundleTargets(config),
-            },
+            presetEnv,
             presetReact: getBabelPresetReactOpts(
               opts.configProvider.pkg,
               opts.cwd,

diff --git a/src/builder/bundless/loaders/javascript/babel.ts b/src/builder/bundless/loaders/javascript/babel.ts
@@ -1,5 +1,6 @@
 import { transform } from '@umijs/bundler-utils/compiled/babel/core';
 import { winPath } from '@umijs/utils';
+import browsersList from 'browserslist';
 import path from 'path';
 import { IFatherBundlessTypes } from '../../../../types';
 import {
@@ -28,6 +29,16 @@ function getParsedDefine(define: Record<string, string>) {
  * babel transformer
  */
 const babelTransformer: IJSTransformerFn = function (content) {
+  let presetEnv: any = {
+    modules: this.config.format === IFatherBundlessTypes.ESM ? false : 'auto',
+  };
+  const browsersListConfig = browsersList.loadConfig({ path: this.paths.cwd });
+  if (browsersListConfig) {
+    presetEnv.ignoreBrowserslistConfig = false;
+  } else {
+    presetEnv.targets = getBundlessTargets(this.config);
+  }
+
   const {
     extraBabelPlugins = [],
     extraBabelPresets = [],
@@ -36,10 +47,7 @@ const babelTransformer: IJSTransformerFn = function (content) {
   } = this.config;
   // TODO: correct optional in umi types and replace any here
   const presetOpts: any = {
-    presetEnv: {
-      targets: getBundlessTargets(this.config),
-      modules: this.config.format === IFatherBundlessTypes.ESM ? false : 'auto',
-    },
+    presetEnv,
     presetReact: getBabelPresetReactOpts(
       this.pkg,
       path.dirname(this.paths.fileAbsPath),