2016 年的 Typescript 工作流程
Typescript workflow in 2016
我是网络开发的新手。我一直想尝试用 Typescript 开发一个简单的客户端项目（在本例中是一个游戏，但这个问题也适用于其他项目）。没有服务器技术，只是在浏览器中运行的东西。
我启动了 Webstorm，并设法在几分钟内启动并运行了一个简单的 Typescript 项目。
然而，当我试图为一个更大的项目建立一些结构和合理的工作流程时，我开始 运行 进入似乎数量惊人的工具、管理器、构建系统，每个都处于不同的状态折旧。
我正在寻找一种简单可靠的方法：
- 使用多个文件而不手动包含脚本标签
- 使用外部类型定义和 javascript 库并以合理的方式加载它们
对于我自己的代码，似乎 es6 模块是我最好的选择，但出于某种原因，我似乎仍然需要使用第三方模块加载器？它们似乎有很多种可用——commonjs、requirejs、systemjs、webpack。此外，尽管许多来源都建议使用 es6，但大多数浏览器仍未完全支持它，这意味着我也需要进行转译。此外，在某处有一个使用 gulp/grunt 的构建过程，我什至不知道是否需要使用！
我完全不确定如何处理外部模块。我尝试了 Bower，但似乎我仍然需要为所有外部库手动包含标签（不是 巨大的 问题，但我确信有更好的方法！）
这确实是我经历这一切时的普遍感觉 - 肯定有更好的方法来做事。但是翻过堆积如山的过时信息意味着我无法找到任何可靠的东西。
那么 - 前端专家 - 对于当今世界的 Typescript（甚至只是 Javascript）开发的良好工作流程，您会向一个完全的新手提出什么建议？
I'm after a way to simply and reliably:
- Use multiple files without manually including script tags
- Use external type definitions and javascript libraries and load them in a sensible way
最简单的方法：just use Webpack.
对于整个图片，您可以选择：捆绑器 Webpack, Browserify, Rollup. With these solutions, a bundle is re-built with all the JS code after each modification in the code. Or the asynchronous loaders SystemJS (here is a tutorial) with JSPM for bundling, or RequireJS。
请注意，在 TypeScript 代码中使用 ES6 语法 import / export，加载器的选择并不意味着 TypeScript 代码有重大差异。在 TS module 选项的帮助下，相同的代码可以编译成不同的格式。
For my own code, it seems like es6 modules are my best bet, but for some reason it seems like I still need to use a third party module loader?
你是对的。
What does import actually do?
Would you believe… nothing? [...]
ES6 leaves the details of module loading entirely up to the implementation.
还有一个未完成的程序API。另见 the book of Dr. Axel Rauschmayer：
The module loader API is work in progress
As you can see in the repository of the JavaScript Loader Standard, the module loader API is still work in progress.
关于捆绑的必要性，我建议this article。
但是今天，借助 TypeScript 和加载程序，您将能够在大型前端项目中轻松使用标准语法 import / export。
...
Also, although numerous sources are recommending using es6, it's still not fully supported in the majority of browsers, meaning I need to get transpilation going as well.
仍然需要了解目标浏览器的差异。但是对于可以填充的新 API，es6-shim 可以用您的应用程序代码打包。
一般来说，在您的 tsconfig.json 中您可以指定您想要的内容。
我建议检查 SystemJS（和 jspm 捆绑），学习曲线有点陡峭，但值得。
然后您可以加载任何类型的模块并确保其正确执行。
Angular2 官方教程 with typescript 是用 SystemJS 方式制作的。你仍然需要转译，但你不必打包为一个可执行脚本（这是 Webpack 或 Browserify 的目的，但是前者有一些选项）。
使用 UMD，您可以拥有许多捆绑包、CommonJS 和 AMD 捆绑包，并在许多地方和谐地加载它们。我建议将主要依赖项作为 CommonJS，并将动态部分作为 AMD 的。它的性能非常出色。
我推荐我的项目Zwitterion. It's new, but it's extremely simple. It is just a server that will handle all of the transpilation for you without any setup on your part. Just include TypeScript files directly in the browser, and you get ES module, async/await, and any other TypeScript feature support automatically. It doesn't support transpilation of plain JS files yet, but that will probably come. So, if you have a TypeScript project, I believe this is the absolute simplest way to get started. And you can build for production if you build your app so that it can be served as a static asset from a CDN. Read the article以获取更多信息。
我是网络开发的新手。我一直想尝试用 Typescript 开发一个简单的客户端项目（在本例中是一个游戏，但这个问题也适用于其他项目）。没有服务器技术，只是在浏览器中运行的东西。
我启动了 Webstorm，并设法在几分钟内启动并运行了一个简单的 Typescript 项目。
然而，当我试图为一个更大的项目建立一些结构和合理的工作流程时，我开始 运行 进入似乎数量惊人的工具、管理器、构建系统，每个都处于不同的状态折旧。
我正在寻找一种简单可靠的方法：
- 使用多个文件而不手动包含脚本标签
- 使用外部类型定义和 javascript 库并以合理的方式加载它们
对于我自己的代码，似乎 es6 模块是我最好的选择，但出于某种原因，我似乎仍然需要使用第三方模块加载器？它们似乎有很多种可用——commonjs、requirejs、systemjs、webpack。此外，尽管许多来源都建议使用 es6，但大多数浏览器仍未完全支持它，这意味着我也需要进行转译。此外，在某处有一个使用 gulp/grunt 的构建过程，我什至不知道是否需要使用！
我完全不确定如何处理外部模块。我尝试了 Bower，但似乎我仍然需要为所有外部库手动包含标签（不是 巨大的 问题，但我确信有更好的方法！）
这确实是我经历这一切时的普遍感觉 - 肯定有更好的方法来做事。但是翻过堆积如山的过时信息意味着我无法找到任何可靠的东西。
那么 - 前端专家 - 对于当今世界的 Typescript（甚至只是 Javascript）开发的良好工作流程，您会向一个完全的新手提出什么建议？
I'm after a way to simply and reliably:
- Use multiple files without manually including script tags
- Use external type definitions and javascript libraries and load them in a sensible way
最简单的方法：just use Webpack.
对于整个图片，您可以选择：捆绑器 Webpack, Browserify, Rollup. With these solutions, a bundle is re-built with all the JS code after each modification in the code. Or the asynchronous loaders SystemJS (here is a tutorial) with JSPM for bundling, or RequireJS。
请注意，在 TypeScript 代码中使用 ES6 语法 import / export，加载器的选择并不意味着 TypeScript 代码有重大差异。在 TS module 选项的帮助下，相同的代码可以编译成不同的格式。
For my own code, it seems like es6 modules are my best bet, but for some reason it seems like I still need to use a third party module loader?
你是对的。
What does
importactually do?Would you believe… nothing? [...]
ES6 leaves the details of module loading entirely up to the implementation.
还有一个未完成的程序API。另见 the book of Dr. Axel Rauschmayer：
The module loader API is work in progress
As you can see in the repository of the JavaScript Loader Standard, the module loader API is still work in progress.
关于捆绑的必要性，我建议this article。
但是今天，借助 TypeScript 和加载程序，您将能够在大型前端项目中轻松使用标准语法 import / export。
...
Also, although numerous sources are recommending using es6, it's still not fully supported in the majority of browsers, meaning I need to get transpilation going as well.
仍然需要了解目标浏览器的差异。但是对于可以填充的新 API，es6-shim 可以用您的应用程序代码打包。
一般来说，在您的 tsconfig.json 中您可以指定您想要的内容。
我建议检查 SystemJS（和 jspm 捆绑），学习曲线有点陡峭，但值得。
然后您可以加载任何类型的模块并确保其正确执行。
Angular2 官方教程 with typescript 是用 SystemJS 方式制作的。你仍然需要转译，但你不必打包为一个可执行脚本（这是 Webpack 或 Browserify 的目的，但是前者有一些选项）。
使用 UMD，您可以拥有许多捆绑包、CommonJS 和 AMD 捆绑包，并在许多地方和谐地加载它们。我建议将主要依赖项作为 CommonJS，并将动态部分作为 AMD 的。它的性能非常出色。
我推荐我的项目Zwitterion. It's new, but it's extremely simple. It is just a server that will handle all of the transpilation for you without any setup on your part. Just include TypeScript files directly in the browser, and you get ES module, async/await, and any other TypeScript feature support automatically. It doesn't support transpilation of plain JS files yet, but that will probably come. So, if you have a TypeScript project, I believe this is the absolute simplest way to get started. And you can build for production if you build your app so that it can be served as a static asset from a CDN. Read the article以获取更多信息。