From 3e7732d6cb64c68bb5bdbbeaed9341d43d3785f6 Mon Sep 17 00:00:00 2001 From: Jinbao1001 Date: Mon, 30 Dec 2024 15:56:12 +0800 Subject: [PATCH] feat: support browsersList --- package.json | 1 + pnpm-lock.yaml | 46 +++++++++++- src/builder/bundle/index.ts | 75 +++++++++++-------- .../bundless/loaders/javascript/babel.ts | 16 +++- 4 files changed, 100 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 13412e65..32abd735 100644 --- 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 index 181dee9b..f178d6cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -102,6 +102,9 @@ importers: '@umijs/test': specifier: ^4.0.68 version: 4.0.68(@babel/core@7.21.3) + browserslist: + specifier: ^4.24.3 + version: 4.24.3 git-repo-info: specifier: ^2.1.1 version: 2.1.1 @@ -336,7 +339,7 @@ packages: '@babel/compat-data': 7.21.4 '@babel/core': 7.18.2 '@babel/helper-validator-option': 7.21.0 - browserslist: 4.21.5 + browserslist: 4.24.3 semver: 6.3.0 dev: true @@ -4089,6 +4092,7 @@ packages: /acorn-import-assertions@1.8.0(acorn@8.7.1): resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==} + deprecated: package has been renamed to acorn-import-attributes peerDependencies: acorn: ^8 dependencies: @@ -4274,7 +4278,7 @@ packages: peerDependencies: postcss: ^8.1.0 dependencies: - browserslist: 4.21.5 + browserslist: 4.24.3 caniuse-lite: 1.0.30001466 fraction.js: 4.2.0 normalize-range: 0.1.2 @@ -4609,6 +4613,16 @@ packages: node-releases: 2.0.10 update-browserslist-db: 1.0.10(browserslist@4.21.5) + /browserslist@4.24.3: + resolution: {integrity: sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + dependencies: + caniuse-lite: 1.0.30001690 + electron-to-chromium: 1.5.76 + node-releases: 2.0.19 + update-browserslist-db: 1.1.1(browserslist@4.24.3) + /bser@2.1.1: resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==} dependencies: @@ -4670,6 +4684,9 @@ packages: /caniuse-lite@1.0.30001466: resolution: {integrity: sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w==} + /caniuse-lite@1.0.30001690: + resolution: {integrity: sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==} + /chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -5326,6 +5343,9 @@ packages: /electron-to-chromium@1.4.331: resolution: {integrity: sha512-tdtr9y9oJl8VDiS+HeB6e/JDJqdDGjIk3yRfEMHm5rDnWQ/D5SbafybAayInxolbfbH6pouV5g7ZUAwE/WVtHw==} + /electron-to-chromium@1.5.76: + resolution: {integrity: sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==} + /elliptic@6.5.7: resolution: {integrity: sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==} dependencies: @@ -5582,6 +5602,10 @@ packages: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} + /escalade@3.2.0: + resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} + engines: {node: '>=6'} + /escape-string-regexp@1.0.5: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==, tarball: https://registry.npmjs.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz} engines: {node: '>=0.8.0'} @@ -7787,6 +7811,9 @@ packages: /node-releases@2.0.10: resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==} + /node-releases@2.0.19: + resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==} + /normalize-package-data@2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -8060,6 +8087,9 @@ packages: /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + /picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -8429,7 +8459,7 @@ packages: '@csstools/postcss-stepped-value-functions': 1.0.0(postcss@8.4.31) '@csstools/postcss-unset-value': 1.0.1(postcss@8.4.31) autoprefixer: 10.4.7(postcss@8.4.31) - browserslist: 4.21.5 + browserslist: 4.24.3 css-blank-pseudo: 3.0.3(postcss@8.4.31) css-has-pseudo: 3.0.4(postcss@8.4.31) css-prefers-color-scheme: 6.0.3(postcss@8.4.31) @@ -9810,6 +9840,16 @@ packages: escalade: 3.1.1 picocolors: 1.0.0 + /update-browserslist-db@1.1.1(browserslist@4.24.3): + resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + dependencies: + browserslist: 4.24.3 + escalade: 3.2.0 + picocolors: 1.1.1 + /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: diff --git a/src/builder/bundle/index.ts b/src/builder/bundle/index.ts index 2cf8d7ea..0d8dacb3 100644 --- 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 { { 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 { 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 index baa94d95..12292e4c 100644 --- 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) { * 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),