如何将文档注入 systemjs-builder 以捆绑 Angular 4.0.0 应用程序？答案

【问题标题】：How do I get document injected into systemjs-builder for bundling a angular 4.0.0 app?如何将文档注入 systemjs-builder 以捆绑 Angular 4.0.0 应用程序？
【发布时间】：2017-09-12 04:59:03
【问题描述】：

我正在尝试捆绑一个 Angular 4.0.0 应用程序。

我尝试过 browserify，但新的 angular-loader 插件（允许在带有 templateUrl 的组件中不需要 moduleId）没有被调用，因此模板最终路径错误。

所以我转向了 systemjs-builder，但问题是当它运行该插件时它会崩溃，说该文档未定义。

有没有办法将文档注入构建器？

还是我做错了什么？

这是我正在测试的简单构建器（systemjs-config 是 angular quickstart 之一）。

var path = require("path"); 
var Builder = require('systemjs-builder');

var builder = new Builder('src/frontend', 'src/frontend/systemjs.config.js');

builder .bundle('main.js', 'bundle.js') 
.then(function() {   
     console.log('Build complete'); 
}) 
.catch(function(err) {   
     console.log('Build error');   
     console.log(err); 
});

【问题讨论】：

我一直在使用这个github.com/laxa1986/gulp-angular-embed-templates 和gulp。另外，看看stackoverflow.com/questions/35867660/…
感谢@martin，我正试图摆脱 gulp 并仅使用 npm 完成所有工具以最小化依赖关系（我厌倦了我的 packages.json 长一英里），但是我会看看回购。我也许可以将其合并到 systemjs 构建器中。尽管如此，对于其他来到这里的人来说，我觉得我们不能这样做只是 systemjs builder 似乎很奇怪，必须有一种方法，如果有人有想法，我将非常感谢。
这可要了我的命，我似乎找不到解决办法。我很难相信我们是唯一试图提出一个可行的 systemjs 构建的人:(
你能分享一个重现这个问题的回购吗？
我不是 systemJS 用户，所以我不知道这是否有帮助，但是平台浏览器中有 DOCUMENT 的 DI 令牌。我会说，把它拉进去，然后用它。

标签： angular systemjs systemjs-builder

【解决方案1】：

我长期以来一直在寻找解决这个问题的方法。由于找不到，我修改了 systemjs-angular-loader.js 以绕过错误。有了这个 hack systemjs-builder 现在可以工作了。

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
  if (load.source.indexOf('moduleId') != -1) return load;

  var document=document || null;
  if(document){
    var url = document.createElement('a');
    url.href = load.address;

    var basePathParts = url.pathname.split('/');

    basePathParts.pop();
    var basePath = basePathParts.join('/');

    var baseHref = document.createElement('a');
    baseHref.href = this.baseURL;
    baseHref = baseHref.pathname;

    if (!baseHref.startsWith('/base/')) { // it is not karma
      basePath = basePath.replace(baseHref, '');
    }
  }
  else{
    var address=load.address;
    address=address.replace('file:///'+__dirname+'/', '');
    var basePathParts = address.split('/');

    basePathParts.pop();
    var basePath = basePathParts.join('/');
  }

  load.source = load.source
    .replace(templateUrlRegex, function(match, quote, url){
      var resolvedUrl = url;

      if (url.startsWith('.')) {
        resolvedUrl = basePath + url.substr(1);
      }

      return 'templateUrl: "' + resolvedUrl + '"';
    })
    .replace(stylesRegex, function(match, relativeUrls) {
      var urls = [];

      while ((match = stringRegex.exec(relativeUrls)) !== null) {
        if (match[2].startsWith('.')) {
          urls.push('"' + basePath + match[2].substr(1) + '"');
        } else {
          urls.push('"' + match[2] + '"');
        }
      }

      return "styleUrls: [" + urls.join(', ') + "]";
    });

  return load;
};

【讨论】：