javascript - 使用 TS 但不使用 NPM 在 Angular2 上进行开发

Question

所有指南都建议安装 npm，但我正在寻找没有它的方法。

There are Angular2 files available ，但它们都不是 TypeScript 代码。

那我该怎么办？我需要 Angular2.ts 或特定的 Angular2-xx.js 和 .d.ts 文件吗？

更新:我已经通过 NPM 下载了 Angular2 并获得了完整的源代码树，很难在其中找到特定的东西。为 Angular2 搜索 .d.ts 没有返回任何结果。大量的.ts和.d.ts文件在庞大的代码集合中。

Answer 1

实际上，这些文件是 Angular2 及其依赖项的捆绑版本。它们可以在使用 TypeScript 编写的应用程序中使用。事实上，TypeScript 不能开箱即用地用于浏览器。您必须对它们进行预处理，以便使用 TypeScript 编译器将它们编译成 ES 代码，或者直接使用 TypeScript 库在浏览器中转译它们。

这可以在 SystemJS 中直接通过其 transpiler 配置属性进行配置(见下文)。

首先只需将这些文件添加到您的 HTML 文件中:

<script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>

如果您想在没有 NPM 的情况下实现应用程序，您可以在浏览器中转换您的 TypeScript 文件。我们在使用 plunkr 时就是这样做的。为此，您需要按如下所述配置 SystemJS:

<script>
  System.config({
    transpiler: 'typescript', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

小心在 app 文件夹下定义您的 TypeScript 文件

这是一个简单(完整)的 plunkr，描述了如何做到这一点:https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info .

您可以下载相应的代码并在本地使用静态 HTTP 服务器(如 http-server)使用其代码，而无需使用 NPM。这可能是您的用例的一个很好的起点...

编辑

如果你的 TypeScript 文件是由 VS 编译的，你需要调整 SystemJS 配置，如下所述:

<script>
  System.config({
    packages: {
      app: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

这样，SystemJS 将在导入时加载您的 JS 文件。例如:System.import('app/boot') 将使用 app/boot.js 而不是 TypeScript