knockout.js - 使用 webpack 通过 knockoutjs 异步加载模块

Question

我目前正在使用 webpack 建立一个 knockoutjs 项目。我想要实现的主要方面之一是 bundle 的延迟加载。虽然我已经能够实现代码拆分，但它目前要求应用程序专门包含此代码，我想摆脱这个特定代码，因为我相信 knockoutjs 已经配备了必要的基础设施。

在应用设置期间，组件在 knockoutjs 中注册如下:

ko.components.register('form-page', { require: 'components/form-page/form' });

Knockout 将使用仅使用组件表单页面的异步请求加载引用模块。

在我的 webpack 设置中，这会失败，因为

• Webpack 没有检测到对 components/form-page/form 的依赖
• 模块名称被 webpack 破坏为一些短标识符，因此 components/form-page/form 在运行时是未知的

理想情况下，我会让 webpack 将其检测为异步模块依赖项，但在第一步中，在保留模块名称的同时声明我希望在 webpack 配置中可用的模块就足够了，让 ko 需要它的依赖项因为它需要它。

知道如何做到这一点吗？

Answer 1

简短的回答是我还没有找到动态执行此操作的方法。不过，这里有另一种方法。

src/components/Input/Input.js

示例组件

import ko from 'knockout';
import FormComponent from '../../../classes/FormComponent';

class InputControl extends FormComponent {
  constructor(params) {
    super(params);
  }
}

ko.components.register('input-control', {
  viewModel: InputControl,
  template: require('./Input.html')
})

src/components/index.js

使用 webpack 内置的东西循环遍历每个组件文件夹以获取 ko.components.register

const components = require.context('./', true, /\.js$/);

components.keys().forEach(function(component) {
  const componentName = component.substr(2);
  require('./' + componentName);
});

src/app.js

在 applyBindings 发生之前注册组件很重要，否则 ko 不会知道它们。

require("./components");

var PageModel = function() {...}
model = new PageModel();

ko.applyBindings(model);

基本上创建所有组件并一次包含所有组件。适用于热模块更换等。通常也很轻。