Support browserlists from package.json (#588)

Author: huozhi

README.md

@@ -470,6 +470,20 @@ Bunchee offers a convenient watch mode for rebuilding your library whenever chan
 #### `target`
 
 If you specify `target` option in `tsconfig.json`, then you don't have to pass it again through CLI.
+To target a range of browsers, you can use the `browserslist` field in `package.json`, bunchee will use it to determine the target browsers for the output bundle.
+
+For example:
+
+```json
+{
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "maintained node versions",
+    "not dead"
+  ]
+}
+```
 
 #### Package lint
 

src/bundle.ts

@@ -1,4 +1,8 @@
-import type { BundleConfig, BundleJobOptions } from './types'
+import type {
+  BrowserslistConfig,
+  BundleConfig,
+  BundleJobOptions,
+} from './types'
 import fsp from 'fs/promises'
 import fs from 'fs'
 import { resolve } from 'path'
@@ -134,13 +138,19 @@ async function bundle(
     hasTsConfig = true
   }
 
+  let browserslistConfig: BrowserslistConfig | undefined
+  if (options.runtime === 'browser') {
+    browserslistConfig = pkg.browserslist
+  }
+
   const outputState = createOutputState({ entries })
   const buildContext: BuildContext = {
     entries,
     pkg,
     cwd,
     tsOptions: defaultTsOptions,
     useTypeScript: hasTsConfig,
+    browserslistConfig,
     pluginContext: {
       outputState,
       moduleDirectiveLayerMap: new Map(),

src/rollup/input.ts

@@ -1,4 +1,5 @@
 import { InputOptions, Plugin } from 'rollup'
+import { type Options as SwcOptions } from '@swc/core'
 import { BuildContext, BundleOptions, ParsedExportCondition } from '../types'
 import { isBinExportPath, isESModulePackage, isNotNull } from '../utils'
 import { normalizeExportPath } from '../entries'
@@ -106,6 +107,7 @@ export async function buildInputConfig(
     pkg,
     cwd,
     tsOptions: { tsConfigPath, tsCompilerOptions },
+    browserslistConfig,
     pluginContext,
   } = buildContext
   const isBinEntry = isBinExportPath(exportCondition.name)
@@ -145,11 +147,13 @@ export async function buildInputConfig(
     decorators: true,
   } as const
 
-  const swcOptions: import('@swc/types').Options = {
+  const hasBrowserslistConfig = !!(browserslistConfig && !hasSpecifiedTsTarget)
+  const swcOptions = {
     jsc: {
-      ...(!hasSpecifiedTsTarget && {
-        target: jscTarget,
-      }),
+      ...(!hasSpecifiedTsTarget &&
+        !hasBrowserslistConfig && {
+          target: jscTarget,
+        }),
       loose: true, // Use loose mode
       externalHelpers: false,
       parser: swcParserConfig,
@@ -166,7 +170,12 @@ export async function buildInputConfig(
     sourceMaps: bundleConfig.sourcemap,
     inlineSourcesContent: false,
     isModule: true,
-  } as const
+    ...(hasBrowserslistConfig && {
+      env: {
+        targets: browserslistConfig,
+      },
+    }),
+  } satisfies SwcOptions
 
   const sizePlugin = pluginContext.outputState.plugin(cwd)
 

src/types.ts

@@ -72,6 +72,7 @@ type PackageMetadata = {
   exports?: string | Record<string, ExportCondition>
   types?: string
   typings?: string
+  browserslist?: BrowserslistConfig
 }
 
 type BuncheeRollupConfig = {
@@ -112,12 +113,15 @@ type ExportPaths = Record<string, FullExportCondition>
 
 type Entries = Record<string, ParsedExportCondition>
 
+type BrowserslistConfig = string | string[] | Record<string, string>
+
 type BuildContext = {
   entries: Entries
   pkg: PackageMetadata
   cwd: string
   tsOptions: TypescriptOptions
   useTypeScript: boolean
+  browserslistConfig: BrowserslistConfig | undefined
   pluginContext: {
     outputState: OutputState
     moduleDirectiveLayerMap: Map<string, Set<[string, string]>>
@@ -150,4 +154,5 @@ export type {
   BuildContext,
   BundleJobOptions,
   bundleEntryOptions,
+  BrowserslistConfig,
 }

test/integration/browserslist/index.test.ts

@@ -0,0 +1,16 @@
+import { createIntegrationTest, assertFilesContent } from '../utils'
+
+describe('browserslist', () => {
+  it('should work with basic JSX format', async () => {
+    await createIntegrationTest(
+      {
+        directory: __dirname,
+      },
+      ({ distDir }) => {
+        assertFilesContent(distDir, {
+          'index.js': `_class_private_field_loose_key`,
+        })
+      },
+    )
+  })
+})

test/integration/browserslist/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "browserslist",
+  "main": "./dist/index.js",
+  "browserslist": [
+    "ie 9"
+  ]
+}

test/integration/browserslist/src/index.js

@@ -0,0 +1,7 @@
+export class A {
+  static prop = 'A-prop'
+
+  #foo() {
+    return 'foo'
+  }
+}