feat: support custom haul configuration

Author: 徐远翔

README.md

@@ -2,6 +2,8 @@
 
 [![npm version](https://img.shields.io/npm/v/umi-preset-react-native.svg?style=flat-square)](https://www.npmjs.com/package/umi-preset-react-native)
 
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
 针对 [react-native](https://reactnative.dev/) 应用的 [umi](https://umijs.org/) 插件集。
 
 [发布日志](/CHANGELOG.md)
@@ -57,15 +59,17 @@ _以下是`umi-preset-react-native`对 Node、react、react-native、umi 版本
 ```javascript
 // .umirc.js
 export default {
+  mountElementId: '',
   history: {
     type: 'memory',
   },
 };
 ```
 
-**注意：**
+**注意：RN 环境中没有 DOM 和 BOM， 所以这两项配置为必填，需要覆盖[umi](https://umijs.org/)的默认值，避免运行时进入到调用 DOM/BOM API 的代码分支导致运行错误。**
 
-- `history`：[umi](https://umijs.org/) 默认值是：`'browser'`，在 RN 中只能使用：`'memory'`类型。
+- `mountElementId`：[umi](https://umijs.org/) 默认值是：`'root'`，在 RN 中**必须覆盖为空字符串**。
+- `history`：[umi](https://umijs.org/) 默认值是：`'browser'`，在 RN 中**只能使用：`'memory'`类型**。
 
 > All dependencies start with @umijs/preset-、@umijs/plugin-、umi-preset-、umi-plugin- will be registered as plugin/plugin-preset.
 
@@ -127,11 +131,38 @@ _上文未列出的[umi 配置](https://umijs.org/config)暂不支持。RN 开
   - [ ] theme
   - [ ] styles
 - 其他：
+
   - [ ] base
   - [ ] publicPath
   - [ ] runtimePublicPath
   - [ ] ssr
 
+#### umi-preset-react-native 扩展配置
+
+```javascript
+// .umirc.js
+module.default = {
+  reactNative: {
+    appKey: require('./app.json').name,
+    version: require('react-native/package.json').version,
+  },
+  haul: {
+    bundles: {
+      index: {
+        entry: './umi.ts',
+      },
+    },
+  },
+};
+```
+
+- `reactNative`：选填，默认值：上面代码示例中的值
+- `haul`：选填，默认值：上面代码示例中的值，即[Project Configuration](https://github.com/callstack/haul/blob/master/docs/Configuration.md#project-configuration-reference)。
+
+**注意**：不需要使用 haul 提供的工具：`makeConfig`和`withPolyfills`。直接填入[Project Configuration](https://github.com/callstack/haul/blob/master/docs/Configuration.md#project-configuration-reference)的字段即可。
+
+在做多 bundle 切分时，要保证主 bundle 中必须包含`./umi.ts`。
+
 ### 开发
 
 修改`package.json`文件，使用`umi`取代`react-native`：
@@ -219,3 +250,7 @@ yarn add @umijs/plugin-dva --dev
 ```npm
 yarn add umi-plugin-antd-react-native --dev
 ```
+
+## 深入
+
+### 切分多 bundle

packages/preset/package.json

@@ -49,7 +49,6 @@
     "@haul-bundler/preset-0.60": "0.18.0",
     "@umijs/bundler-utils": "^3.0.0",
     "metro": "^0.51.1",
-    "umi-react-native-renderer": "^0.0.2",
     "umi-react-native-runtime": "^0.0.2",
     "webpack-chain": "6.4.0"
   },

packages/preset/src/index.ts

@@ -3,11 +3,13 @@ export default function () {
     plugins: [
       require.resolve('./plugins/commands/buildRn'),
       require.resolve('./plugins/commands/devRn'),
-      require.resolve('./plugins/generateFiles/rn/umi'),
+      require.resolve('./plugins/generateFiles/react-native/polyfill'),
+      require.resolve('./plugins/generateFiles/react-native/runtime'),
+      require.resolve('./plugins/generateFiles/react-native/umi'),
       require.resolve('./plugins/generateFiles/babelConfig'),
       require.resolve('./plugins/generateFiles/haulConfig'),
-      require.resolve('./plugins/generateFiles/index'),
       require.resolve('./plugins/features/reactNative'),
+      require.resolve('./plugins/features/haul'),
     ],
   };
 }

packages/preset/src/plugins/features/haul.ts

@@ -0,0 +1,17 @@
+import { IApi } from '@umijs/types';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'haul',
+    config: {
+      default: { bundles: { index: { entry: './umi.ts' } } },
+      schema(joi) {
+        return joi
+          .object({
+            bundles: joi.object().required(),
+          })
+          .optional();
+      },
+    },
+  });
+};

packages/preset/src/plugins/features/reactNative.ts

@@ -12,7 +12,7 @@ export default (api: IApi) => {
   } = api;
 
   /**
-   * 优先读取用户目录下依赖的绝对路径（下面会解释为什么不用api.addProjectFirstLibraries）
+   * 优先读取用户目录下依赖的绝对路径
    * @param library 比如：'react-native'（目录） 或者 'react-router/esm/index.js'（文件）
    * @param defaults library找不到时的缺省值
    * @param dir true-返回目录绝对路径，false-返回文件绝对路径
@@ -57,12 +57,15 @@ export default (api: IApi) => {
           .object({
             appKey: joi.string(), // moduleName  app.json#name
             version: joi.string(), // RN 版本号
+            templates: joi.string(),
+            bundles: joi.object(),
           })
           .optional();
       },
     },
   });
 
+  // haul中没有treeShaking， mainFields 写死了。
   api.addProjectFirstLibraries(() => [
     { name: 'react-native', path: REACT_NATIVE_PATH },
     { name: 'react-router', path: require.resolve('react-router/esm/react-router.js') },
@@ -117,4 +120,6 @@ export default (api: IApi) => {
     }
     throw new TypeError(`"${name}" 只支持 react-native："0.59.0及以上（>= 0.59.0）" 和 "1.0.0以下（< 1.0.0）" 版本。`);
   });
+
+  api.addTmpGenerateWatcherPaths(() => ['react-native']);
 };

packages/preset/src/plugins/generateFiles/haulConfig.ts

@@ -4,19 +4,23 @@ import webpack from 'webpack';
 import Config from 'webpack-chain';
 
 const CONTENT = `import _defaultsDeep from 'lodash/defaultsDeep';
-import { withPolyfills, makeConfig } from '{{{ haulPresetPath }}}';
+import { makeConfig } from '{{{ haulPresetPath }}}';
 
 const transform = ({ config }) => {
   return _defaultsDeep({{{ webpackConfig }}}, config);
 };
 
+const haulConfig = {{{ haulConfig }}};
+
+const bundles = haulConfig.bundles;
+
 export default makeConfig({
-  bundles: {
-    index: {
-      entry: withPolyfills('./index.ts'),
-      transform,
-    },
-  },
+  bundles: Object.keys(bundles)
+    .map((bundleName) => ({
+      [bundleName]: _defaultsDeep(bundles[bundleName], {transform}),
+    }))
+    .reduce((prev, curr) => ({...prev, ...curr})),
+  ...haulConfig,
 });
 
 `;
@@ -69,12 +73,13 @@ export default (api: IApi) => {
       await api.config.chainWebpack(webpackConfig, { env, webpack: defaultWebpack, createCSSRule });
     }
     // 防止加载umi Common JS格式的代码
-    webpackConfig.resolve.alias.set('umi', winPath(join(absTmpPath || '', 'rn', 'umi')));
+    webpackConfig.resolve.alias.set('umi', winPath(join(absTmpPath || '', 'react-native', 'umi')));
     const config = webpackConfig.toConfig();
     api.writeTmpFile({
       path: 'haul.config.js',
       content: Mustache.render(CONTENT, {
         haulPresetPath: winPath(detectHaulPresetPath()),
+        haulConfig: JSON.stringify(api.config?.haul || {}, null, 2),
         webpackConfig: JSON.stringify(config, null, 2),
       }),
     });

packages/preset/src/plugins/generateFiles/index.ts

@@ -0,0 +1,51 @@
+import { IApi } from '@umijs/types';
+
+const CONTENT = `{{{ polyfills }}}
+import 'react-native/Libraries/Core/InitializeCore.js';
+
+// @ts-ignore
+if (global.window === undefined) {
+  // @ts-ignore
+  global.window = global;
+}
+
+`;
+
+export default (api: IApi) => {
+  const {
+    utils: { Mustache, semver },
+  } = api;
+  api.addPolyfillImports(() => [
+    {
+      source: './react-native/polyfill',
+    },
+  ]);
+
+  api.onGenerateFiles(() => {
+    const polyfills: string[] = [];
+    if (semver.lt(api.config?.reactNative?.version, '0.60.0')) {
+      polyfills.push(
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/Object.es6.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/console.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/error-guard.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/Number.es6.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/String.prototype.es6.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/Array.prototype.es6.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/Array.es6.js'),
+        require.resolve('@haul-bundler/preset-0.59/vendor/polyfills/Object.es7.js'),
+      );
+    } else {
+      polyfills.push(
+        'react-native/Libraries/polyfills/console.js',
+        'react-native/Libraries/polyfills/error-guard.js',
+        'react-native/Libraries/polyfills/Object.es7.js',
+      );
+    }
+    api.writeTmpFile({
+      path: 'react-native/polyfill.ts',
+      content: Mustache.render(CONTENT, {
+        polyfills: polyfills.map((it: string) => `import '${it}';`).join('\n'),
+      }),
+    });
+  });
+};

packages/preset/src/plugins/generateFiles/indexTpl.ts

@@ -0,0 +1,24 @@
+import { IApi } from '@umijs/types';
+import { join } from 'path';
+
+const runtimeTpl = `import {AppRegistry} from 'react-native';
+
+export function render(clientRender: () => any, args: {hot?: boolean} = {}) {
+  AppRegistry.registerComponent('{{{ appKey }}}', () => clientRender);
+}
+
+
+`;
+
+export default (api: IApi) => {
+  api.addRuntimePlugin(() => [join(api.paths.absTmpPath!, 'react-native', 'runtime.ts')]);
+  api.onGenerateFiles(() => {
+    delete api.config.mountElementId;
+    api.writeTmpFile({
+      path: 'react-native/runtime.ts',
+      content: api.utils.Mustache.render(runtimeTpl, {
+        appKey: api.config?.reactNative?.appKey,
+      }),
+    });
+  });
+};

packages/preset/src/plugins/generateFiles/react-native/polyfill.ts

@@ -12,9 +12,9 @@ export * from '../core/umiExports';
 `;
 
 export default (api: IApi) => {
-  api.onGenerateFiles(async () => {
+  api.onGenerateFiles(() => {
     api.writeTmpFile({
-      path: 'rn/umi.ts',
+      path: 'react-native/umi.ts',
       content: CONTENT,
     });
   });