带有 systemJS 和文本插件的 Angular2 Html 视图，'exports.translate' 未定义

Question

我知道这是一个较早的讨论，但我在将 angular2 与 systemjs 一起使用时遇到了这个问题。我唯一拥有的元数据如下：

System.config({
    'defaultJSExtensions': true,
     baseURL: '/js',
     map: {
         text: '/js/angular2/text.js'
     }
}

我使用文本插件加载我的 html 视图并且它们确实加载正确，但是我仍然收到以下提到的错误，这是为什么？

"text.js:4 Uncaught ReferenceError: exports is not defined(anonymous function)"

整个 text.js 文件非常简单：

(function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {/*
Text plugin
*/
exports.translate = function(load) {
  return 'module.exports = "' + load.source
    .replace(/(["\])/g, '\')
    .replace(/[\f]/g, "\f")
    .replace(/[\b]/g, "\b")
    .replace(/[\n]/g, "\n")
    .replace(/[\t]/g, "\t")
    .replace(/[\r]/g, "\r")
    .replace(/[\u2028]/g, "\u2028")
    .replace(/[\u2029]/g, "\u2029")
  + '";';
}
}).apply(__cjsWrapper.exports, __cjsWrapper.args);
})(System, System);

第 4 行，确实是 exports.translate。我找不到 text.js 的选项来指定我没有使用 NodeJS，那么我该如何解决这个问题？

Answer 1

如果您想使用 SystemJS API，我会尝试以下方法来注册您的模块：

System.register('mymodule', [ ], function(exports, context) {
  exports.translate = function(load) {
    return 'module.exports = "' + load.source
      .replace(/(["\])/g, '\')
      .replace(/[\f]/g, "\f")
      .replace(/[\b]/g, "\b")
      .replace(/[\n]/g, "\n")
      .replace(/[\t]/g, "\t")
      .replace(/[\r]/g, "\r")
      .replace(/[\u2028]/g, "\u2028")
      .replace(/[\u2029]/g, "\u2029")
    + '";';
  };
});

这样您就不需要在 map 中添加 text.js 而是直接包含使用 <script> 标签：

<script src="text.js"></script>

然后您可以这样导入您的模块：

import {translate} from 'mymodule';

编辑

使用匿名模块：

System.register([ ], function(exports, context) {
  exports.translate = function(load) {
    return 'module.exports = "' + load.source
      .replace(/(["\])/g, '\')
      .replace(/[\f]/g, "\f")
      .replace(/[\b]/g, "\b")
      .replace(/[\n]/g, "\n")
      .replace(/[\t]/g, "\t")
      .replace(/[\r]/g, "\r")
      .replace(/[\u2028]/g, "\u2028")
      .replace(/[\u2029]/g, "\u2029")
    + '";';
  };
});

在这种情况下，由您决定 link 模块文件的名称（使用默认扩展名或 packages 块中的专用条目）。

Answer 2

如果 text.js 的请求是通过浏览器而不是 SystemJS 发送的，就会发生这种情况。必须通过 SystemJS 请求和下载它。您的开发捆绑应该正确设置以适应这一点。

尽管正如@Thierry Themplier 所提到的，您可以保持原样并为您的文件夹创建包配置以指定默认 .js 扩展名和 .html 或您需要的任何其他扩展名。在我的例子中，这将是一个维护噩梦，文件夹层次结构很深，并且对源文件所在位置的依赖性很差。

带有 systemJS 和文本插件的 Angular2 Html 视图，'exports.translate' 未定义

Angular2 Html views with systemJS and text plugin, 'exports.translate' is undefined

typescript

systemjs

angular