Webpack imports-loader with messageformat 和 angular-translate

Question

我在让 angular-translate-interpolation-messageformat 与 MessageFormat 的 imports-loader 配合得很好时遇到了一些困难。我在 this issue.

中概述了这个问题

已复制：

即使模块是使用 UMD 公开的（是的），它实际上正在使用全局 MessageFormat 对象 here。这迫使我要么将 MessageFormat 公开到 window（我不想这样做），要么使用 webpack 进行变通（这也很麻烦）。真正的解决方案是正确使用 UMD，而不是依赖于全局变量，而是正确地要求东西。

这是 UMD 格式现在的样子：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module unless amdModuleId is set
    define([], function () {
      return (factory());
    });
  } else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory();
  } else {
    factory();
  }
}(this, function () {

// interpolation-messageformat code that uses the global MessageFormat variable

}));

它应该是这样的：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module unless amdModuleId is set
    define(['messageformat'], function (MessageFormat) { // <-- changed line
      return (factory(MessageFormat)); // <-- changed line
    });
  } else if (typeof exports === 'object') {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require('messageformat')); // <-- changed line
  } else {
    factory(root.MessageFormat); // <-- changed line
  }
}(this, function (MessageFormat) { // <-- changed line

// interpolation-messageformat code that uses the global MessageFormat variable

}));

谢谢！

因此，在该问题得到解决之前，我需要采取一种解决方法。我真的更愿意避免使用全局变量。这是我目前使用 imports-loader:

的解决方案

require('imports?MessageFormat=messageformat!angular-translate/dist/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat');

有了它，一切都很好，但是，当我打开 Chrome 时，当运行使用 MessageFormat 的 angular-translate-interpolation-messageformat 函数说 MessageFormat 未定义

这就是事情变得奇怪的地方...

如果我在任何其他浏览器（Chrome 除外）中打开该应用程序，它就可以正常工作。此外，如果我在部署时打开应用程序，它可以正常工作（即使在 Chrome 中）。

事情变得更奇怪了...

如果我打开 Chrome DevTools 并然后打开 Chrome 中的本地应用程序，一切正常。 o_O

所以，无论如何，我想知道是不是我使用 imports-loader 不正确或其他原因。任何帮助表示赞赏！

Answer 1

您是否正在使用 devtool: 'eval'？我已经看到你描述的同样奇怪的行为，它消失了切换到 devtool: 'source-map'。

Webpack imports-loader with messageformat 和 angular-translate

Webpack imports-loader with messageformat and angular-translate

javascript

google-chrome

angularjs

webpack