javascript - webpack2 使用 knockout 模板进行 tree-shaking

Question

我正在使用 webpack 来捆绑我的 typescript 项目，并使用 Knockout 作为我的模板引擎。

现在，当我构建生产项目时，它停止工作 - knockout 模板提示未定义属性。

我怀疑 webpack2 的 tree-shaking 算法正在删除该属性，因为它没有在任何 typescript 代码中使用，而仅在 knockout data-bind 字符串中使用。

有没有办法告诉 webpack 始终包含某个属性，即使它认为它没有被使用？

Answer 1

我对 webpack 不太熟悉，但我在使用 google 闭包编译器时遇到了同样的问题。它将删除仅在数据绑定(bind)中使用的属性并混淆其他属性......

对我有用的解决方案方向是 knockout 本身也在其源中使用的方向:ko.exportProperty

它的使用方式如下:

var VM = function() {
  this.somePropOnlyUsedInView = "Hello world";

  ko.exportProperty(this, "somePropOnlyUsedInView", this.somePropOnlyUsedInView);
}

该方法做了两件事:

• 它使用 obj["string"] 表示法来强制属性名称
• 它实际上引用了该属性，使缩小器认为它已被使用且无法删除。

请告诉我这个实用程序是否也适用于您基于 webpack 的构建过程，我很想知道。