diff --git a/README.md b/README.md index ffdcb50..790ce3e 100644 --- a/README.md +++ b/README.md @@ -348,7 +348,7 @@ const {CracoRemoteComponentsPlugin, CracoLibsExamplePlugin, env} = require('@kne #### CracoRemoteComponentsPlugin -用于远程组件项目的 Craco 插件,自动配置文档解析、模块联邦和 CSS Modules 支持。 +用于远程组件项目的 Craco 插件,自动配置文档解析、模块联邦和 CSS Modules 支持。生产构建会关闭 webpack `concatenateModules`(scope hoisting),避免 Module Federation 与 ESM babel helpers / locale 拼进同一作用域时出现 `Cannot access ... before initialization`。开发态 `start` 不受影响。 | 属性名 | 说明 | 类型 | 默认值 | |-----|----|----|-----| diff --git a/doc/api.md b/doc/api.md index fbf1672..9d058ef 100644 --- a/doc/api.md +++ b/doc/api.md @@ -4,7 +4,7 @@ const {CracoRemoteComponentsPlugin, CracoLibsExamplePlugin, env} = require('@kne ### CracoRemoteComponentsPlugin -用于远程组件项目的 Craco 插件,自动配置文档解析、模块联邦和 CSS Modules 支持。 +用于远程组件项目的 Craco 插件,自动配置文档解析、模块联邦和 CSS Modules 支持。生产构建会关闭 webpack `concatenateModules`(scope hoisting),避免 Module Federation 与 ESM babel helpers / locale 拼进同一作用域时出现 `Cannot access ... before initialization`。开发态 `start` 不受影响。 | 属性名 | 说明 | 类型 | 默认值 | |-----|----|----|-----| diff --git a/lib/craco-fix-plugin.js b/lib/craco-fix-plugin.js index d452d51..c1faec8 100644 --- a/lib/craco-fix-plugin.js +++ b/lib/craco-fix-plugin.js @@ -3,6 +3,10 @@ const env = require("./env"); module.exports = { overrideWebpackConfig({webpackConfig, context}) { if (context.env === 'production') { + // 关闭 scope hoisting:MF shared + ESM babel helpers/locale 被拼进同一作用域会 TDZ + webpackConfig.optimization = Object.assign({}, webpackConfig.optimization, { + concatenateModules: false + }); when(context.env === 'production', () => { // 查找 MiniCssExtractPlugin 实例 const miniCssExtractPlugin = webpackConfig.plugins.find(plugin => plugin.constructor && plugin.constructor.name === 'MiniCssExtractPlugin'); @@ -27,4 +31,4 @@ module.exports = { }; return webpackConfig; } -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index 0b3b36c..c2e986d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kne/modules-dev", - "version": "2.4.9", + "version": "2.4.10", "description": "用于辅助在项目内启动一个规范化组件开发的环境", "publishConfig": { "access": "public", diff --git a/test/craco-fix-plugin.test.js b/test/craco-fix-plugin.test.js new file mode 100644 index 0000000..a64c94f --- /dev/null +++ b/test/craco-fix-plugin.test.js @@ -0,0 +1,22 @@ +const { expect } = require('chai'); +const plugin = require('../lib/craco-fix-plugin'); + +const createConfig = (concatenateModules = true) => ({ + plugins: [], + optimization: { concatenateModules }, + resolve: {} +}); + +describe('craco-fix-plugin concatenateModules', () => { + it('production 应关闭 concatenateModules', () => { + const webpackConfig = createConfig(true); + plugin.overrideWebpackConfig({ webpackConfig, context: { env: 'production' } }); + expect(webpackConfig.optimization.concatenateModules).to.equal(false); + }); + + it('development 不修改 concatenateModules', () => { + const webpackConfig = createConfig(true); + plugin.overrideWebpackConfig({ webpackConfig, context: { env: 'development' } }); + expect(webpackConfig.optimization.concatenateModules).to.equal(true); + }); +});