From 0f4bb140565838f900b1e378115d51cde675936e Mon Sep 17 00:00:00 2001 From: "xinglong.wangwxl" Date: Tue, 5 Nov 2024 16:33:25 +0800 Subject: [PATCH 1/2] build: package react to the bundle file --- packages/core/package.json | 4 ++-- packages/core/src/api/require.ts | 9 ++++++++- packages/toolkit/webpack/config.build.js | 17 ++++------------- yarn.lock | 4 ++-- 4 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index e52cdd32..fabb66a2 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -83,7 +83,7 @@ "@types/react-dom": "^18.2.0" }, "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.2.0 || ^16.0.0", + "react-dom": "^18.2.0 || ^16.0.0" } } diff --git a/packages/core/src/api/require.ts b/packages/core/src/api/require.ts index e5fcb7a3..e94c5d9c 100644 --- a/packages/core/src/api/require.ts +++ b/packages/core/src/api/require.ts @@ -55,6 +55,8 @@ import * as buffer from 'buffer'; import * as crypto from 'crypto'; import * as os from 'os'; import * as path from 'path'; +import * as React from 'react'; +import ReactDOM, * as ReactDom from 'react-dom/client'; export function requireModule(module: '@opensumi/ide-addons'): typeof Addons; export function requireModule(module: '@opensumi/ide-comments'): typeof Comments; @@ -109,6 +111,8 @@ export function requireModule(module: 'buffer'): typeof buffer; export function requireModule(module: 'process'): typeof process; export function requireModule(module: 'assert'): typeof assert; export function requireModule(module: 'path'): typeof path; +export function requireModule(module: 'react'): typeof React; +export function requireModule(module: 'react-dom/client'): typeof ReactDom; export function requireModule(module: string): any { switch (module) { @@ -215,7 +219,10 @@ export function requireModule(module: string): any { return assert; case 'path': return path; - + case 'react': + return React; + case 'react-dom/client': + return ReactDOM; default: throw new Error(`not found module ${module}`); } diff --git a/packages/toolkit/webpack/config.build.js b/packages/toolkit/webpack/config.build.js index 855ba117..d18f2232 100644 --- a/packages/toolkit/webpack/config.build.js +++ b/packages/toolkit/webpack/config.build.js @@ -32,18 +32,6 @@ const libBundle = createWebpackConfig({ }, externals: [ { - react: { - root: 'React', - commonjs2: 'react', - commonjs: 'react', - amd: 'react', - }, - 'react-dom': { - root: 'ReactDOM', - commonjs2: 'react-dom', - commonjs: 'react-dom', - amd: 'react-dom', - }, moment: { root: 'moment', commonjs2: 'moment', @@ -58,6 +46,9 @@ const libBundle = createWebpackConfig({ concatenateModules: false, splitChunks: false, }, + experiments: { + asyncWebAssembly: true, // 启用 WebAssembly 支持 + }, }, }); @@ -105,4 +96,4 @@ const globalBundle = createWebpackConfig({ }, }); -module.exports = [libBundle, globalBundle]; +module.exports = [libBundle, globalBundle]; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3ecad308..a39757fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -738,8 +738,8 @@ __metadata: "@types/react-dom": "npm:^18.2.0" tslib: "npm:^2.2.0" peerDependencies: - react: ^18.2.0 - react-dom: ^18.2.0 + react: ^18.2.0 || ^16.0.0 + react-dom: ^18.2.0 || ^16.0.0 bin: codeblitz: bin/codeblitz languageName: unknown From 21a2eeaadb415c6b75059ff529c2f83bda065852 Mon Sep 17 00:00:00 2001 From: "xinglong.wangwxl" Date: Thu, 7 Nov 2024 21:29:03 +0800 Subject: [PATCH 2/2] chore: codeblitz with react --- packages/toolkit/webpack/config.build.js | 58 +++++++++++++++++++++++- packages/toolkit/webpack/util/index.js | 1 + 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/packages/toolkit/webpack/config.build.js b/packages/toolkit/webpack/config.build.js index d18f2232..096d3761 100644 --- a/packages/toolkit/webpack/config.build.js +++ b/packages/toolkit/webpack/config.build.js @@ -31,6 +31,62 @@ const libBundle = createWebpackConfig({ libraryTarget: 'umd', }, externals: [ + { + react: { + root: 'React', + commonjs2: 'react', + commonjs: 'react', + amd: 'react', + }, + 'react-dom': { + root: 'ReactDOM', + commonjs2: 'react-dom', + commonjs: 'react-dom', + amd: 'react-dom', + }, + moment: { + root: 'moment', + commonjs2: 'moment', + commonjs: 'moment', + amd: 'moment', + }, + }, + '@codeblitzjs/ide-registry', + ], + optimization: { + minimize: false, + concatenateModules: false, + splitChunks: false, + }, + experiments: { + asyncWebAssembly: true, // 启用 WebAssembly 支持 + }, + }, +}); + +const libBundleWithReact = createWebpackConfig({ + mode: 'production', + tsconfigPath: path.join(__dirname, '../../../tsconfig.json'), + outputPath: path.join(__dirname, '../../core/bundle'), + define: { + ...Object.keys(define).reduce((obj, key) => { + obj[key] = JSON.stringify(define[key]); + return obj; + }, {}), + __non_webpack_require__: '() => {}', + }, + webpackConfig: { + context: path.join(__dirname, '../../..'), + entry: { + [config.appEntryWithReact]: './packages/core/src', + }, + // 此处 bundle 的包仅作为 commonjs 使用，但因为 external 原因会导致 webpack4 加载 bundle 出错，因此还是使用 umd + output: { + library: 'AlexLib', + libraryTarget: 'umd', + }, + externals: [ + // 此处没有 external React，将 React 打包进去以应对 React16 的集成方 { moment: { root: 'moment', @@ -96,4 +152,4 @@ const globalBundle = createWebpackConfig({ }, }); -module.exports = [libBundle, globalBundle]; \ No newline at end of file +module.exports = [libBundle, libBundleWithReact, globalBundle]; \ No newline at end of file diff --git a/packages/toolkit/webpack/util/index.js b/packages/toolkit/webpack/util/index.js index a6cbb116..8ad6ba85 100644 --- a/packages/toolkit/webpack/util/index.js +++ b/packages/toolkit/webpack/util/index.js @@ -33,6 +33,7 @@ exports.nodePolyfill = { exports.config = { appEntry: 'codeblitz', + appEntryWithReact: 'codeblitz-with-react', appGlobalEntry: 'codeblitz.global', appGlobalMinEntry: 'codeblitz.global.min', editorEntry: 'codeblitz.editor',