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

【问题标题】：Angular2 Html views with systemJS and text plugin, 'exports.translate' is undefined带有 systemJS 和文本插件的 Angular2 Html 视图，“exports.translate”未定义
【发布时间】：2016-04-26 03:28:30
【问题描述】：

我知道这是一个较早的讨论，但我在使用 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, '\\$1')
    .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，那么我该如何解决这个问题？

【问题讨论】：

你想用commonjs还是systemjs api来实现你的模块？
Angular2 是具有寄存器格式的 SystemJS。但是，Angular2 的源代码本身是用register 格式编写的。所以是的，我正在尝试使用 SystemJS api。

标签： typescript angular systemjs

【解决方案1】：

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

System.register('mymodule', [ ], function(exports, context) {
  exports.translate = function(load) {
    return 'module.exports = "' + load.source
      .replace(/(["\\])/g, '\\$1')
      .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, '\\$1')
      .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")
    + '";';
  };
});

在这种情况下，您可以使用名称链接模块文件（使用默认扩展名或packages 块中的专用条目）。

【讨论】：

好吧，我通过在配置中指定 defaultJSExtensions: true 解决了 SystemJS 未添加 .js 扩展名的问题。您的方法需要包定义以正确添加将撤消该修复的扩展。那么现在没有!text，你如何告诉SystemJS 将.js 或.html 扩展添加到哪个资源？
您还可以创建一个匿名模块（通过删除System.register 函数的第一个参数）。在这种情况下，由您决定使用名称链接模块文件...
主要的text.js来自NPM。如果可能的话，我喜欢将其保留为默认值（确实如此），这样我就可以升级或将代码交给我的同事，他们会恢复软件包。它按原样工作，因为有人阅读了整个页面。

【解决方案2】：

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

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

【讨论】：