SystemJS typescript的问题？

Question

我就是不能理解模块和路径。我正在编写一个Chrome扩展，并尝试在angular2中使用typescript。我让它工作过一次，但我想重组我的目录。似乎每次我想要设置项目或者添加文件或页面时，我都会遇到这个问题。有什么地方可以学习定位模块和javascript/typescript文件的规则吗？

我想做的是有一个src文件夹，里面有我的html，css (或者更少的/sass)和typescript文件，还有一个www文件夹，里面有我的html，css和编译好的js文件。我已经设置了我的原始任务，它们编译得很好。因为我使用的是Angular 2，并且在一个扩展中不能有内联脚本，所以我要创建的每个页面都有两个单独的脚本，一个包含系统设置的src/pages/index-page.ts脚本，它是使用<script src="js/pages/index-page.js"></script>直接从www/index.html加载的

declare var System : any;

System.config({
  packages: {
    appScripts: {                    
      defaultExtension: 'js'
    }
  }
});

System.import('js/pages/index-boot')
  .then(null, console.error.bind(console));

以及它应该加载的src/pages/index-boot.ts脚本

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {IndexApp} from './index-app';

bootstrap(IndexApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

当然，我在尝试加载/www/js/pages/index-boot时遇到网络故障。如果我添加了js，那么它就会加载该文件，但是在查找router和index-app时会出现错误。

为什么index-page试图在浏览器中加载不带扩展名的index-boot？我是否需要以不同的方式组织我的文件？有没有什么网站可以解释这一切？我不明白为什么一个页面必须有三个单独的代码文件(系统配置和导入引导、引导和应用程序)。

Answer 1

为什么索引页在没有扩展名的情况下试图在浏览器中加载索引启动？

因为你没有要求它这么做。据我从你的问题可以看出，你的设置中没有文件夹appScripts，因此defaultExtension：'js‘被忽略了。要以一种简单的方式修复它，请使用：

System.defaultJSExtensions = true;

点击此处查看更多信息：defaultJSExtensions

这将使您在学习如何在systemjs (packages)中设置包时开始，但请注意，此结构已被弃用。

作为一个起点，angular2 quickstart是一个很好的地方。注意他们使用的名为"app“的包，并将其与他们的文件夹结构进行比较-注意那里的”app“文件夹。

索引您必须为每个应用程序设置一次索引( SystemJS -page.js)。不是每一页都是这样。然后，您需要一些地方来引导索引应用程序( angular2 -boot.ts)，然后是包含业务逻辑的应用程序的其余部分(app.ts和其他所有内容

Answer 2

defaultJSExtensions将解决您的扩展问题。

System.config({
  defaultJSExtensions: true, // Will prepend .js to the module names
  paths: {
    '*': '/www/js/pages/*',  // If all your module are under /www/js/pages
    'angular2/*': '/path/to/angular2/*'
  },
  packages: {  // I don't see any appScripts package ref in your exemple, you can probably drop that one.
    appScripts: {                    
      defaultExtension: 'js'
    }
  }
});

有了这个配置，您就可以简单地执行System.import('index-boot')