带有消息格式和角度翻译的 Webpack 导入加载器

Question

我在使angular-translate-interpolation-messageformat 与imports-loader 与MessageFormat 配合使用时遇到了一些困难。我在this issue 中概述了这个问题。

复制：

---

尽管模块使用 UMD (yay) 公开，但它实际上使用的是全局 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'。