feat: pre-pack bundler (#6601)

* chore: bump rspack version * fix: bump rspack version * feat: pre bundle rspack/core * fix: pre bundle * fix: import path in esm
alibaba · Nov 23, 2023 · 6174842 · 6174842
1 parent a0df6fa
commit 6174842
Show file tree

Hide file tree

Showing 14 changed files with 502 additions and 461 deletions.
diff --git a/packages/bundles/package.json b/packages/bundles/package.json
@@ -33,11 +33,22 @@
     "react-refresh": "0.14.0",
     "core-js-pure": "^3.8.1",
     "error-stack-parser": "^2.0.6",
-    "@rspack/core": "0.3.0",
-    "@rspack/dev-server": "0.3.0",
-    "@ice/css-modules-hash": "0.0.6"
+    "@rspack/dev-server": "0.3.11",
+    "@ice/css-modules-hash": "0.0.6",
+    "browserslist": "^4.21.3",
+    "compare-versions": "6.0.0-rc.1",
+    "enhanced-resolve": "5.12.0",
+    "fast-querystring": "1.1.2",
+    "json-parse-even-better-errors": "^3.0.0",
+    "neo-async": "2.6.2",
+    "watchpack": "^2.4.0",
+    "webpack-sources": "3.2.3",
+    "zod": "^3.21.4",
+    "zod-validation-error": "1.2.0",
+    "@rspack/binding": "0.3.11"
   },
   "devDependencies": {
+    "@rspack/core": "0.3.11",
     "@types/less": "^3.0.3",
     "@types/lodash": "^4.14.181",
     "@types/webpack-bundle-analyzer": "^4.4.1",
@@ -78,7 +89,7 @@
     "connect-history-api-fallback": "^1.6.0",
     "default-gateway": "^6.0.3",
     "express": "^4.17.3",
-    "graceful-fs": "^4.2.6",
+    "graceful-fs": "4.2.10",
     "http-proxy-middleware": "^2.0.3",
     "ipaddr.js": "^2.0.1",
     "open": "^8.0.9",

diff --git a/packages/bundles/scripts/tasks.ts b/packages/bundles/scripts/tasks.ts
@@ -220,6 +220,29 @@ const tasks = [
       fs.copySync(path.join(__dirname, '../webpack/packages'), targetPath);
     },
   },
+  {
+    pkgName: '@rspack/core',
+    skipCompile: true,
+    declaration: false,
+    patch: () => {
+      const pkgPath = path.join(__dirname, '../node_modules/@rspack/core');
+      const targetPath = path.join(__dirname, '../compiled/@rspack/core');
+      fs.removeSync(targetPath);
+      // Copy the entire directory.
+      // Mark: when copy each file separately, the build process will be stuck.
+      fs.copySync(pkgPath, targetPath);
+      // Remove node_modules while bin files may be linked to node_modules.
+      fs.removeSync(path.join(pkgPath, 'node_modules'));
+      // filter out js files and replace with compiled files.
+      const filePaths = globbySync(['**/*.js'], { cwd: targetPath, ignore: ['node_modules'] });
+      filePaths.forEach((filePath) => {
+        const sourcePath = path.join(targetPath, filePath);
+        const fileContent = fs.readFileSync(sourcePath, 'utf8');
+        fs.writeFileSync(sourcePath, replaceDeps(fileContent, ['tapable', 'schema-utils', 'graceful-fs']));
+      });
+      // TODO: replace @rspack/binding.
+    },
+  },
 ];
 
 export default tasks;
diff --git a/packages/bundles/src/rspack.ts b/packages/bundles/src/rspack.ts
@@ -1 +1 @@
-export * from '@rspack/core';
+export * from '../compiled/@rspack/core/dist/index.js';
diff --git a/packages/ice/package.json b/packages/ice/package.json
@@ -100,9 +100,9 @@
     "sass": "^1.50.0",
     "unplugin": "^1.5.0",
     "webpack": "^5.88.0",
-    "webpack-dev-server": "^4.7.4",
-    "@rspack/core": "0.3.0",
-    "@rspack/dev-server": "0.3.0"
+    "webpack-dev-server": "4.15.0",
+    "@rspack/core": "0.3.11",
+    "@rspack/dev-server": "0.3.11"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

diff --git a/packages/ice/src/bundler/rspack/getConfig.ts b/packages/ice/src/bundler/rspack/getConfig.ts
@@ -1,6 +1,5 @@
 import getRspackConfig from '@ice/rspack-config';
-import type { Configuration } from '@rspack/core';
-import type { rspack as Rspack } from '@ice/bundles/esm/rspack.js';
+import type { Configuration, rspack as Rspack } from '@rspack/core';
 import type { Config } from '@ice/shared-config/types';
 import { getRouteExportConfig } from '../../service/config.js';
 import {
@@ -42,7 +41,7 @@ const getConfig: GetConfig = async (context, options, rspack) => {
     },
   } = context;
   const { reCompile, ensureRoutesConfig } = getRouteExportConfig(rootDir);
-  const getPlugins = (taskConfig: Config): Configuration['plugins'] => {
+  const getPlugins = (taskConfig: Config): Config['plugins'] => {
     const { target, outputDir, useDataLoader, server } = taskConfig;
     return [
       // Add spinner for webpack task.
@@ -69,11 +68,11 @@ const getConfig: GetConfig = async (context, options, rspack) => {
         getAllPlugin,
         frameworkExports: generator.getExportList('framework', target),
       }),
-    ].filter(Boolean);
+    ].filter(Boolean) as Config['plugins'];
   };
-  return taskConfigs.map(({ config }) => {
+  return await Promise.all(taskConfigs.map(async ({ config }) => {
     const plugins = getPlugins(config);
-    return getRspackConfig({
+    return await getRspackConfig({
       rootDir,
       rspack,
       runtimeTmpDir: RUNTIME_TMP_DIR,
@@ -89,7 +88,7 @@ const getConfig: GetConfig = async (context, options, rspack) => {
         plugins: (config.plugins || []).concat(plugins),
       },
     });
-  });
+  }));
 };
 
 

diff --git a/packages/ice/src/bundler/rspack/index.ts b/packages/ice/src/bundler/rspack/index.ts
@@ -1,4 +1,4 @@
-import type { MultiCompiler } from '@rspack/core';
+import type { MultiCompiler, rspack as Rspack } from '@rspack/core';
 import type { RspackDevServer } from '@rspack/dev-server';
 import { logger } from '../../utils/logger.js';
 import type { BundlerOptions, Context } from '../types.js';
@@ -20,8 +20,10 @@ async function bundler(
   let compiler: MultiCompiler;
   let devServer: RspackDevServer;
   const { rspack } = await import('@ice/bundles/esm/rspack.js');
-  const rspackConfigs = await getConfig(context, options, rspack);
+  // Override the type of rspack, because of rspack is imported from pre-compiled bundle.
+  const rspackConfigs = await getConfig(context, options, rspack as unknown as typeof Rspack);
   try {
+    // @ts-ignore
     compiler = rspack(rspackConfigs);
   } catch (error) {
     logger.error('Webpack compile error.');

diff --git a/packages/ice/src/bundler/webpack/start.ts b/packages/ice/src/bundler/webpack/start.ts
@@ -32,8 +32,10 @@ export async function startDevServer(
     // Sort by length, shortest path first.
     a.split('/').filter(Boolean).length - b.split('/').filter(Boolean).length);
   const webTaskConfig = taskConfigs.find(({ name }) => name === WEB);
-  const customMiddlewares = webpackConfigs[0].devServer?.setupMiddlewares;
-  const defaultDevServerConfig = await getDefaultServerConfig(webpackConfigs[0].devServer, commandArgs);
+  // @ts-expect-error webpack-dev-server types in Configuration is missing.
+  const originalDevServer: DevServerConfiguration = webpackConfigs[0].devServer;
+  const customMiddlewares = originalDevServer?.setupMiddlewares;
+  const defaultDevServerConfig = await getDefaultServerConfig(originalDevServer, commandArgs);
   let devServerConfig: DevServerConfiguration = {
     ...defaultDevServerConfig,
     setupMiddlewares: (middlewares, devServer) => {
@@ -50,7 +52,7 @@ export async function startDevServer(
     },
   };
   // merge devServerConfig with webpackConfig.devServer
-  devServerConfig = merge(webpackConfigs[0].devServer, devServerConfig);
+  devServerConfig = merge(originalDevServer, devServerConfig);
   const urls = getUrls({
     taskConfig: webTaskConfig,
     devServerConfig,

diff --git a/packages/plugin-i18n/package.json b/packages/plugin-i18n/package.json
@@ -53,7 +53,7 @@
     "@types/accept-language-parser": "^1.5.3",
     "@types/react": "^18.0.33",
     "cross-env": "^7.0.3",
-    "webpack-dev-server": "^4.13.2"
+    "webpack-dev-server": "4.15.0"
   },
   "peerDependencies": {
     "@ice/app": "^3.3.7",

diff --git a/packages/plugin-pha/package.json b/packages/plugin-pha/package.json
@@ -29,7 +29,7 @@
     "build-scripts": "^2.1.2-0",
     "esbuild": "^0.17.16",
     "webpack": "^5.88.0",
-    "webpack-dev-server": "^4.9.2"
+    "webpack-dev-server": "4.15.0"
   },
   "repository": {
     "type": "http",

diff --git a/packages/rspack-config/package.json b/packages/rspack-config/package.json
@@ -19,7 +19,7 @@
     "@ice/bundles": "0.1.17"
   },
   "devDependencies": {
-    "@rspack/core": "^0.3.0"
+    "@rspack/core": "0.3.11"
   },
   "scripts": {
     "watch": "tsc -w --sourceMap",

diff --git a/packages/rspack-config/src/index.ts b/packages/rspack-config/src/index.ts
@@ -2,8 +2,7 @@ import * as path from 'path';
 import { createRequire } from 'module';
 import { compilationPlugin, compileExcludes, getDefineVars, getCompilerPlugins } from '@ice/shared-config';
 import type { Config, ModifyWebpackConfig } from '@ice/shared-config/types';
-import type { Configuration } from '@rspack/core';
-import type { rspack as Rspack } from '@ice/bundles/esm/rspack.js';
+import type { Configuration, rspack as Rspack } from '@rspack/core';
 import AssetManifest from './plugins/AssetManifest.js';
 import getSplitChunks from './splitChunks.js';
 import getAssetsRule from './assetsRule.js';
@@ -22,11 +21,11 @@ interface GetRspackConfigOptions {
 
 type GetConfig = (
   options: GetRspackConfigOptions,
-) => Configuration;
+) => Promise<Configuration>;
 
 const require = createRequire(import.meta.url);
 
-const getConfig: GetConfig = (options) => {
+const getConfig: GetConfig = async (options) => {
   const {
     rootDir,
     taskConfig,
@@ -75,6 +74,7 @@ const getConfig: GetConfig = (options) => {
     enableEnv: true,
     getRoutesFile,
   });
+  const { DefinePlugin, ProvidePlugin } = await import('@ice/bundles/esm/rspack.js');
   const cssFilename = `css/${hashKey ? `[name]-[${hashKey}].css` : '[name].css'}`;
   // get compile plugins
   const compilerWebpackPlugins = getCompilerPlugins(rootDir, taskConfig || {}, 'rspack', { isServer: false });
@@ -136,13 +136,13 @@ const getConfig: GetConfig = (options) => {
         fileName: 'assets-manifest.json',
         outputDir: path.join(rootDir, runtimeTmpDir),
       }),
-    ].filter(Boolean),
-    builtins: {
-      define: getDefineVars(define, runtimeDefineVars, getExpandedEnvs),
-      provide: {
+      new DefinePlugin(getDefineVars(define, runtimeDefineVars, getExpandedEnvs)),
+      new ProvidePlugin({
         process: [require.resolve('process/browser')],
         $ReactRefreshRuntime$: [require.resolve('./client/reactRefresh.cjs')],
-      },
+      }),
+    ].filter(Boolean),
+    builtins: {
       devFriendlySplitChunks: true,
       css: {
         modules: { localIdentName },

diff --git a/packages/shared-config/package.json b/packages/shared-config/package.json
@@ -28,7 +28,7 @@
     "esbuild": "^0.17.16",
     "postcss": "^8.4.31",
     "webpack": "^5.86.0",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "4.15.0"
   },
   "scripts": {
     "watch": "tsc -w --sourceMap",

diff --git a/packages/shared-config/src/types.ts b/packages/shared-config/src/types.ts
@@ -75,6 +75,9 @@ interface TransformPlugin {
 
 export type ModifyWebpackConfig<T=Configuration, U=typeof webpack> = (config: T, ctx: ConfigurationCtx<U>) => T;
 export type { webpack };
+
+type PluginFunction = (this: Compiler, compiler: Compiler) => void;
+
 export interface Config {
   target?: string;
 
@@ -103,7 +106,7 @@ export interface Config {
   loaders?: (undefined | null | false | '' | 0 | RuleSetRule | '...')[];
 
   plugins?: (
-    | ((this: Compiler, compiler: Compiler) => void)
+    | PluginFunction
     | WebpackPluginInstance
   )[];
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from '@rspack/core';
		export * from '../compiled/@rspack/core/dist/index.js';