feat: support browser option for bundle (#657)

.changeset/khaki-bananas-march.md

@@ -0,0 +1,5 @@
+---
+'@ice/pkg': minor
+---
+
+feat: support `browser` option for bundle mode

.gitignore

@@ -33,6 +33,7 @@ packages/*/es/
 /packages/**/es2017
 /packages/**/cjs
 /packages/**/esm
+/packages/**/dist
 /packages/pkg/tests/fixtures/**/build.config.for-test.mts
 **/node_modules
 /.pnpm-debug.log

packages/pkg/src/helpers/getBabelOptions.ts

@@ -28,7 +28,7 @@ function getBabelOptions(
         jsxRuntime === 'automatic'
           ? {
             runtime: jsxRuntime,
-            importSource: JSX_RUNTIME_SOURCE
+            importSource: JSX_RUNTIME_SOURCE,
           }
           : {
             pragma,

packages/pkg/src/helpers/getRollupOptions.ts

@@ -134,6 +134,7 @@ export function getRollupOptions(
           '.ts', '.jsx', '.tsx', '.mts', '.cjs', '.cts', // @ice/pkg default extensions
           ...(taskConfig.extensions || []),
         ],
+        browser: taskConfig.browser,
       }),
       commonjs({ // To convert commonjs to import, make it compatible with rollup to bundle
         extensions: [

packages/pkg/src/types.ts

@@ -96,6 +96,11 @@ export interface BundleUserConfig {
    * Weather or not compile the dependencies in node_modules.
    */
   compileDependencies?: boolean | Array<RegExp | string>;
+
+  /**
+   * Resolve node module by prefer using `browser` field in package.json.
+   */
+  browser?: boolean;
 }
 
 export interface UserConfig {

packages/pkg/tests/babelPlugin.test.ts

@@ -37,8 +37,8 @@ describe('transform', () => {
     const ret = babelPlugin.transform('<div x-if={false}></div>', 'src/test.tsx');
     expect(cleanCode(ret.code)).toBe(
       cleanCode(`import { createCondition as __create_condition__ } from "babel-runtime-jsx-plus";
-    import { jsx as _jsx } from "react/jsx-runtime";
-    __create_condition__([[() => false, () => /*#__PURE__*/_jsx("div", {})]]);`),
+    import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+    __create_condition__([[() => false, () => _jsx("div", {})]]);`),
     );
   });
 

packages/pkg/tests/fixtures/bundle-browser/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@ice/pkg-tests-fixtures-bundle-browser",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@ice/pkg": "workspace:*",
+    "@ice/pkg-tests-fixtures-mock-entry-package": "workspace:*"
+  }
+}

packages/pkg/tests/fixtures/bundle-browser/src/index.ts

@@ -0,0 +1,2 @@
+import { id } from '@ice/pkg-tests-fixtures-mock-entry-package'
+console.log(id)

packages/pkg/tests/fixtures/mock-entry-package/browser.js

@@ -0,0 +1 @@
+export const id = 'browser'

packages/pkg/tests/fixtures/mock-entry-package/index.d.ts

@@ -0,0 +1 @@
+export declare const id: string

packages/pkg/tests/fixtures/mock-entry-package/main.js

@@ -0,0 +1 @@
+export const id = 'main'

packages/pkg/tests/fixtures/mock-entry-package/module.js

@@ -0,0 +1 @@
+export const id = 'module'

packages/pkg/tests/fixtures/mock-entry-package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@ice/pkg-tests-fixtures-mock-entry-package",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./main.js",
+  "module": "./module.js",
+  "browser": "./browser.js",
+  "types": "./index.d.ts",
+  "description": "模块入口测试",
+  "dependencies": {
+  }
+}

packages/pkg/tests/projects/__snapshots__/bundle-browser.test.ts.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1
+
+exports[`Run config default > cjs structure 1`] = `null`;
+
+exports[`Run config default > dist structure 1`] = `
+{
+  "files": [
+    {
+      "name": "index.cjs.es5.production.js",
+    },
+    {
+      "name": "index.esm.es5.production.js",
+    },
+  ],
+  "name": "dist",
+}
+`;
+
+exports[`Run config default > es2017 structure 1`] = `null`;
+
+exports[`Run config default > esm structure 1`] = `null`;
+
+exports[`Run config default > file content dist/index.cjs.es5.production.js 1`] = `
+"\\"use strict\\";console.log(\\"module\\");
+"
+`;
+
+exports[`Run config default > file content dist/index.esm.es5.production.js 1`] = `
+"console.log(\\"module\\");
+"
+`;
+
+exports[`Run config enable-browser > cjs structure 1`] = `null`;
+
+exports[`Run config enable-browser > dist structure 1`] = `
+{
+  "files": [
+    {
+      "name": "index.cjs.es5.production.js",
+    },
+    {
+      "name": "index.esm.es5.production.js",
+    },
+  ],
+  "name": "dist",
+}
+`;
+
+exports[`Run config enable-browser > es2017 structure 1`] = `null`;
+
+exports[`Run config enable-browser > esm structure 1`] = `null`;
+
+exports[`Run config enable-browser > file content dist/index.cjs.es5.production.js 1`] = `
+"\\"use strict\\";console.log(\\"browser\\");
+"
+`;
+
+exports[`Run config enable-browser > file content dist/index.esm.es5.production.js 1`] = `
+"console.log(\\"browser\\");
+"
+`;

packages/pkg/tests/projects/bundle-browser.test.ts

@@ -0,0 +1,20 @@
+import { runProjectTest } from "./helper";
+
+runProjectTest('bundle-browser', [{
+  name: 'default',
+  config: {
+    transform: { formats: [] },
+    bundle: {
+      formats: ['esm', 'cjs']
+    }
+  }
+}, {
+  name: 'enable-browser',
+  config: {
+    transform: { formats: [] },
+    bundle: {
+      formats: ['esm', 'cjs'],
+      browser: true
+    }
+  }
+}])

website/docs/reference/config.md

@@ -458,6 +458,25 @@ export default defineConfig({
 });
 ```
 
+#### browser
+
++ 类型: `boolean`
++ 默认值: `false`
++ 可用版本: `1.6.0` 
+
+配置解析 Node 模块的时候，是否优先读取 package.json 中的 `browser` 字段。
+如果你的模块**只运行**在浏览器端，可以开启此选项只 bundle 浏览器相关的代码。
+
+```ts title="build.config.mts"
+import { defineConfig } from '@ice/pkg';
+
+export default defineConfig({
+  bundle: {
+    browser: true,
+  },
+});
+```
+
 #### development
 
 :::caution