webpack 动态加载外部模块失败

Question

我正在尝试建立以下架构：一个核心 React 应用程序，它构建了一些基本功能，以及在运行时加载其他 React 组件的能力。这些额外的 React 组件可以按需加载，它们在构建核心应用程序时不可用（因此它们不能包含在核心应用程序的 bundle 中，必须单独构建）。经过一段时间的研究，我遇到了Webpack 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'));

wherecomponentName是与我的模块名称匹配的变量，在这种情况下，“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();
        }
    }
}

我已经确认在构建过程中调用了 externals 中的函数，并且该模块的 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 

我的猜测是它找不到模块。我不明白它在哪里寻找模块，或者如何获取更多信息进行调试。

Answer 1

事实证明，我对 webpack 和动态加载做了一些错误的假设。

我在两件事上遇到了问题 - 我正在加载的模块类型，以及我加载它的方式。

1. 动态导入还不是标准的 ES 功能 - 它将在 ES 2020 中标准化。如果您尝试加载的模块对象是 ES6 模块（也就是包含“export ModuleName”的东西），则此动态导入只会返回一个模块。如果您尝试加载打包为 CommonJS 模块、AMD、UMD 的内容，导入将成功，但您将获得一个空对象。Webpack 似乎不支持创建 ES6 格式的包——它可以创建多种模块类型，在我上面的配置文件中，我实际上是在创建 UMD 模块（通过 libraryTarget 设置配置）。

2. 我对 import 语句本身有问题，因为我在 Webpack 捆绑的应用程序中使用它。Webpack 重新解释了标准的 ES 导入语句。在标准的 webpack 配置中（包括你从 CRA 获得的配置），webpack 使用这个语句作为 bundle 的分割点，所以即使是动态导入的模块也应该在 webpack 构建时存在（并且构建过程将失败它们不可用）。我曾尝试使用 webpack externals 来告诉 webpack 动态加载模块，这使得构建成功而无需模块存在。但是，该应用程序在运行时仍然使用 Webpack 的导入功能，而不是标准的 JS 导入功能。我通过尝试从浏览器控制台运行 import('modulename') 并得到与我的应用程序不同的结果来确认这一点，

为了解决问题#2，您可以通过在 import 语句中添加一些注释来告诉 Webpack 不要重新解释 ES 动态导入。

import(/*webpackIgnore: true*/ 'path/to/module.js');

这将阻止 Webpack 在构建时尝试查找和捆绑动态导入的模块，以及在运行时尝试导入它。这将使应用程序中的行为与浏览器控制台中的行为相匹配。

问题#1 更难解决。正如我上面提到的，导入非 ES6 模块将返回一个空对象（如果您等待承诺或使用 .then()）。然而，事实证明，文件本身确实加载并且代码被执行。可以使用Webpack以“window”格式导出模块，然后按如下方式加载。

await import(/*webpackIgnore: true*/`path/to/module.js`);
let myModule = window['module'].default;

避免使用 window 对象的另一个潜在解决方案是使用能够生成 ES6 模块（因此，不是 Webpack）的系统构建模块。我最终使用 Rollup 创建了一个 ES6 模块，将所有依赖项拉到一个文件中，并通过 Babel 运行输出。这产生了一个通过动态 ES 导入成功加载的模块。以下是我的 rollup.config.js（请注意，我在我的模块中包含了所有需要的外部节点模块——这会增加模块的大小，但这是我特定应用程序的要求——你的可能会有所不同，你需要配置 rollup 以排除模块）

// node-resolve will resolve all the node dependencies
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';

export default {
  input: 'src/myModule.jsx',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs({
      include: 'node_modules/**',      
      namedExports: {
        'node_modules/react/index.js': ['Children', 'Component', 'PropTypes',   'PureComponent', 'React', 'createElement', 'createRef', 'isValidElement', 'cloneElement', 'Fragment'],
        'node_modules/react-dom/index.js': ['render', 'createElement', 'findDOMNode', 'createPortal'],
        'node_modules/react-is/index.js': ['isForwardRef']
      }
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}