运维开发网
广告位招商联系QQ:123077622
 
广告位招商联系QQ:123077622

2016年打字稿工作流程

运维开发网 https://www.qedev.com 2020-03-26 10:21 出处:网络 作者:运维开发网整理
我是网络开发的新手.我一直想尝试在Typescript中开发一个简单的客户端项目(在这个例子中,一个游戏,但这个问题也适用于其他项目).没有服务器技术,只是在浏览器中运行的东西. 我启动了Webstorm并设法在几分钟内完成了一个简单的Typescript项目. 然而,当我尝试为更大的项目设置一些结构和合理的工作流程时,我开始遇到似乎是疯狂的工具,经理,构建系统,每个都处于各种折旧状态. 我正在寻
我是网络开发的新手.我一直想尝试在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可以打包应用程序的代码.

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消