我正在尝试建立以下架构：一个核心 React 应用程序，它具有一些基本功能，并且能够在运行时加载其他 React 组件。这些额外的 React 组件可以按需加载，并且它们在构建核心应用程序时不可用（因此它们不能包含在核心应用程序的捆绑包中，必须单独构建）。经过一段时间的研究，我发现Webpack 外部组件 https://webpack.js.org/configuration/externals/，这似乎很合适。我现在使用以下 webpack.config.js 单独构建我的模块：
const path = require('path');
const fs = require('fs');
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
entry: './src/MyModule.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'MyModule.js',
library: 'MyModule',
libraryTarget: 'umd'
},
externals: {
"react": "react",
"semantic-ui-react": "semantic-ui-react"
},
module: {
rules: [
{
test: /\.(js|jsx|mjs)$/,
include: resolveApp('src'),
loader: require.resolve('babel-loader'),
options: {
compact: true,
},
}
]
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
}
};
查看生成的 MyModule.js 文件，它对我来说看起来是正确的。
现在，在我的核心应用程序中，我按如下方式导入模块：
let myComponent = React.lazy(() => import(componentName + '.js'));
where componentName是与我的模块名称匹配的变量，在本例中，“MyModule”名称在构建时未知，并且该文件在构建时不存在于 src 文件夹中。为了避免在使用未知导入构建此代码时出现 webpack 错误，我已将以下内容添加到核心项目的 webpack.config.js 中：
module.exports = {
externals: function (context, request, callback/*(err, result)*/) {
if (request === './MyModule.js') {
callback(null, "umd " + request);
} else {
callback();
}
}
}
我已经确认外部函数在构建期间被调用，并且 if 条件与该模块匹配。构建成功，我可以运行我的核心应用程序。
然后，为了测试动态加载，我删除了MyModule.js进入我的核心应用程序包所在的 static/js 文件夹，然后导航到我的核心应用程序中通过以下方式请求 MyModule 的页面let myComponent = React.lazy(() => import(componentName + '.js'));
我在导入行的控制台中看到运行时错误，
TypeError: undefined is not a function
at Array.map (<anonymous>)
at webpackAsyncContext
我的猜测是找不到模块。我不明白它在哪里寻找模块，或者如何获取更多信息进行调试。
