使用 TS 但不使用 NPM 在 Angular2 上进行开发 [英] Development on Angular2 with TS but without NPM

问题描述

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

All guides suggests to install npm, but I'm searching for a way without it.

有 Angular2 文件可用，但没有一个是 TypeScript代码.

There are Angular2 files available, but none of them are TypeScript code.

那我该怎么办?我需要 Angular2.ts 还是特定的 Angular2-xx.js 和 .d.ts 文件?

So what must I do? Do I need Angular2.ts or specific Angular2-xx.js and .d.ts files?

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

UPDATE: I've downloaded Angular2 through NPM and gotten the full source tree, in which it's hard to find specific things. Searching for .d.ts for Angular2 returned no results. A lot of .ts and .d.ts files are in the huge collection of code.

推荐答案

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

In fact, these files are a bundled version of Angular2 and its dependencies. They can be used within an application written with TypeScript. As a matter of fact TypeScript can't be used out of the box into browsers. You must to preprocess them to compile them into ES code with the TypeScript compiler or transpile them in the browser directly with the TypeScript library.

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

This can be configured within SystemJS directly through its transpiler configuration attribute (see below).

首先简单地将这些文件添加到您的 HTML 文件中:

First simply add these files in your HTML file:

<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:

If you want to implement an application without NPM, you can transpile your TypeScript files within the browser.It's way we do when using plunkr. For this you need to configure SystemJS as described below:

<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 文件

Be careful to define your TypeScript files under an app folder

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

Here is a simple (and complete) plunkr describing how to do that: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info.

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

You can download the corresponding code and use its code locally with a static HTTP server like http-server without using NPM. This could be a good starting point for your use case...

编辑

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

If your TypeScript files are compiled by VS, you need to adapt the SystemJS configuration, as described below:

<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

This way, SystemJS will load your JS files when doing an import. For example: System.import('app/boot') will use the app/boot.js and not the TypeScript one

这篇关于使用 TS 但不使用 NPM 在 Angular2 上进行开发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！