javascript - 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'));

其中 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 

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

Answer 1

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

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

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

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

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

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

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

问题 #1 更难解决。正如我上面提到的，导入一个非 ES6 模块将返回一个空对象(如果你等待 promise 或使用 .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' )
    })
  ]
}