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.使用这些解决方案,在代码中的每次修改之后,使用所有JS代码重新构建捆绑包.或者使用JSPM进行捆绑的异步装载程序SystemJS(here is a tutorial),或RequireJS.

请注意,通过在TypeScript代码中使用ES6语法导入/导出,加载器的选择并不意味着TypeScript代码的主要区别.在TS模块选项的帮助下,可以将相同的代码编译为不同的格式.

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?

你是对的.

阅读the article from Mozilla：

What does import actually do?

Would you believe… nothing? […]

ES6 leaves the details of module loading entirely 07008.

还有一个未完成的程序化API.另见the book of Dr. Axel Rauschmayer：

The module loader API is work in progress

As you can see in 070010, the module loader API is still work in progress.

关于捆绑的必要性,我建议this article.

但是今天,使用TypeScript和加载器,您将能够轻松地在大型前端项目上使用标准语法导入/导出.

…

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.

仍然需要了解目标浏览器的差异.但是对于可以进行polyfilled的新API,es6-shim可以打包应用程序的代码.