前端：“从搭建环境到放弃”

最近想学学前端。

简单来说，大概是被 Java 、 C#这种“开箱即用”从写到运行一条龙打包好而且有很好的包管理器之类的语言惯坏了、惯懒了、惯笨了。在写 JavaScript 的时候，莫名其妙的“浑身难受”。

语法级别的问题并不重要，但正如之前看到的 V2EX 里面转载的翻译文章中一样，在 Java 、 C#中做一个小 demo 的工程，自己已经早已忘记如何手工搭建一套舒服的开发环境了。 JB 公司的 IDEA 一装上，世界就此美好了。

回到 JavaScript 这边，或者说前端，什么 Babel 、 Webpack 、 Gulp 、 Grunt ……诸如此类的工具虽然应该极大“ boost ”了前端开发速度，但是对于初学者来说，更多是乱花渐欲迷人眼吧。

作为每天起床都高呼“微软大法好”的 Java 开发者（才怪），从数亿年前单细胞生物就遗传下来的趋 hao 利 yi 避 wu 害 lao 的特性让自己在对 JavaScript 浅尝了之后，逐渐想滚到 TypeScript 上面来，毕竟其很多特性还是让人 excited 。况且之前也用 Ionic 2 写过一点点小程序自娱自乐过。

试过之后才发现， Ionic 是前端界里面的好东西啊。能够完整地提供一套简单的开发流程和环境，基本上用 Visual Studio Code 安装一个 TSLint 就能愉快地玩耍了。对于这种方便，自己甚至认为理所当然了。

而当离开了 Ionic 之后，才发现自己真正面对了什么。 Ionic 隐藏了太多太多太多的“过程”，甚至可以说前端人员必须深入掌握了解熟练使用的过程。譬如 Webpack 之类的。

譬如最近想做一个 HTML5 游戏。 Google 了一下，用户数量比较多的开源 HTML5 游戏引擎主要有 pixi.js 和 Phaser （ Phaser 2 的渲染也用的 Pixi 2 ）。

想到自己最爱的 RPG Maker 系列也用了 PIXI 的 v4 版本，觉得可以先用 PIXI 在 TypeScript 下练练手，然后再用 Phaser 做做玩。

不过这就遇到了问题。

PIXI 本身没有 TypeScript 的定义文件，社区的虽然也有，但是与 npm 上面的版本却不一致……看样子 npm 上面的那个也没人管。虽然可以自己手动下载相关的文件，但是为什么没有一个命令或者一堆命令来完成更新呢？ NPM 基本完成了这些，但是譬如 TypeScript 的定义库，有些就很落后于相关工具的更新了。这恐怕也是 TypeScript 的一个大问题吧，缺乏更好的定义库的管理。这个和 Java 、 C#差别还是很大的。

Phaser 则原生就支持 TypeScript ，不过自己通过 npm 安装了之后， TSLint 却找不到相关的类……也无法 import 进来。而在网上一些 Phaser 的工程模板中，却不存在这种问题……

同样的 d.ts 文件， tsconfig.js 设置也没差别，然而就是不能……

同时也发现，大部分的教程在一开始的时候都不知道是有意还是无意直接跳过了搭建开发环境这么一个章节，直接说用喜欢的文本编辑器就好……这对于 Java 、 C#这种拥有非常棒 IDE 的语言来说自然不是问题，但是对于前端开发开说，则应该着重讲一讲……

譬如现在自己还不懂 ESLint 怎么用，怎么让 ESLint 查找我在 HTML 中引入的 JS 文件中的 class 、 function 之类的东西……

大家能不能提供一个快速入门，或者说搭建开发环境的方法？