typescript 使用 TS 但不使用 NPM 在 Angular2 上进行开发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35623270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Development on Angular2 with TS but without NPM
提问by Arman Hayots
All guides suggests to install npm, but I'm searching for a way without it.
所有指南都建议安装npm，但我正在寻找一种没有它的方法。
There are Angular2 files available, but none of them are TypeScript code.
有可用的 Angular2 文件，但它们都不是 TypeScript 代码。
So what must I do? Do I need Angular2.tsor specific Angular2-xx.jsand .d.tsfiles?
那我该怎么办？我是否需要Angular2.ts或者特定Angular2-xx.js和.d.ts文件？
UPDATE: I've downloaded Angular2through NPMand gotten the full source tree, in which it's hard to find specific things. Searching for .d.tsfor Angular2returned no results. A lot of .tsand .d.tsfiles are in the huge collection of code.
更新：我已经下载Angular2过NPM，并得到完整的源代码树，其中很难找到具体的东西。搜索.d.ts对于Angular2没有返回结果。许多.ts和.d.ts文件都在庞大的代码集合中。
采纳答案by Thierry Templier
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.
实际上，这些文件是 Angular2 及其依赖项的捆绑版本。它们可以在用 TypeScript 编写的应用程序中使用。事实上，TypeScript 不能在浏览器中开箱即用。您必须对它们进行预处理才能使用 TypeScript 编译器将它们编译为 ES 代码，或者直接使用 TypeScript 库在浏览器中将它们转译。
This can be configured within SystemJS directly through its transpilerconfiguration attribute (see below).
这可以在 SystemJS 中直接通过它的transpiler配置属性进行配置（见下文）。
First simply add these files in your HTML file:
首先简单地将这些文件添加到您的 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>
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:
如果你想实现一个没有 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>
Be careful to define your TypeScript files under an appfolder
小心在app文件夹下定义您的 TypeScript 文件
Here is a simple (and complete) plunkr describing how to do that: https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info.
这是一个简单（且完整）的 plunkr 描述如何做到这一点：https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info 。
You can download the corresponding code and use its code locally with a static HTTP server like http-serverwithout using NPM. This could be a good starting point for your use case...
您可以下载相应的代码并在本地使用静态 HTTP 服务器的代码，就像http-server不使用 NPM 一样。这可能是您的用例的一个很好的起点......
Edit
编辑
If your TypeScript files are compiled by VS, you need to adapt the SystemJS configuration, as described below:
如果你的 TypeScript 文件是由 VS 编译的，则需要适配 SystemJS 的配置，如下所述：
<script>
System.config({
packages: {
app: {
defaultExtension: 'js',
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
This way, SystemJS will load your JS files when doing an import. For example: System.import('app/boot')will use the app/boot.jsand not the TypeScript one
这样，SystemJS 将在执行导入时加载您的 JS 文件。例如：System.import('app/boot')将使用app/boot.js而不是 TypeScript 的
