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

2017-02-21 15:34:52 +08:00
 Majirefy

最近想学学前端。

简单来说，大概是被 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 之类的东西……

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

8035 次点击
所在节点    问与答
71 条回复
Majirefy
2017-02-21 16:35:03 +08:00
@sokis 爪子已经伸出来啦~求手把手~



@chairuosen 什么能干这事？
chairuosen
2017-02-21 16:40:19 +08:00
@Majirefy 我不知道有啥工具能实现报错，能实现自动提示的倒是有一堆。报错这个应该比较困难，因为 js 运行时对象是可变的，静态分析无法知道某个属性一定没有。
Majirefy
2017-02-21 16:51:44 +08:00
@chairuosen 所以才有了 TS ……原来如此~
yuxuan
2017-02-21 17:42:18 +08:00
前端再也不是那种学习下 HTML 、 css 、 js 开个记事本就能上浏览器学习的时候了
zhouyg
2017-02-21 18:16:18 +08:00
我也用 pixi 写游戏，感觉简单的一匹。当然我不用 ts
loading
2017-02-21 18:36:53 +08:00
jQuery ，开箱即用！
Majirefy
2017-02-21 18:55:53 +08:00
@zhouyg 分享点经验呗
Majirefy
2017-02-21 18:56:27 +08:00
@yuxuan 缅怀一下当年的 FrontPage
ZhaoMiing
2017-02-21 18:58:59 +08:00
所以 ng2 官方出了个 @angular/cli
Aixtuz
2017-02-21 19:39:46 +08:00
突然想起之前一个每每配环境总是出错，来 v 站梨花带雨发帖哭诉的妹子，不知道她现在怎么样了...
Majirefy
2017-02-21 20:15:36 +08:00
@ZhaoMiing 没错，从集成化来说，还是 Angular 好，一个命令行能干很多事，而且不用太多的配置……


@Aixtuz 转行了吧（斜眼笑
laogui
2017-02-21 20:38:22 +08:00
我 2001 年开始做网站， windows 自带的记事本 + IE 浏览器，有这两样就完成了整个网站的制作
lijsh
2017-02-21 20:48:06 +08:00
@sox #7 你 Github 500 多个 repo …容许我叫你一声快枪手吗
bojackhorseman
2017-02-21 20:50:00 +08:00
为什么我觉得 java 才是搭环境到放弃，刚进公司时把整个项目跑起来都把我折腾死了，然后我一个不小心更新了所有代码，就开始报错，然后重新开始搭环境 T_T
sox
2017-02-21 21:07:24 +08:00
@lijsh 500 和快枪手什么关系 =。=
ferrum
2017-02-21 21:58:12 +08:00
现在这些框架都有 template 啊， vue 有 vue-cli ， react 和 angular 也有类似的东西，基本上只要 git clone ， npm install 后就能直接开写。

npm 用淘宝的源，解决一下 node-sass 的安装问题，也算是很流畅的开发体验了。

你要从零开始，安装 node.js ，使用 npm 一个一个依赖地安装，然后自己动手写 webpack.config.js 是比较麻烦，但也是一劳永逸的东西。
Majirefy
2017-02-22 00:39:37 +08:00
@ferrum 的确是这样。自己弄 webpack ，各种 lint ，还有 babel 之类的东西，虽然很麻烦，但是如果能自己走一遍下来，基本也就掌握了，毕竟都是前端开发必须掌握的知识。有 CLI 最好，没有的话也只能自己来了。想自己来一遍的主要原因就是想理解这些工具的用法，这样当没有 CLI 和 template 的时候，也能尽可能搭建起来一套完整的开发环境， happy coding
Majirefy
2017-02-22 00:41:37 +08:00
@bojackhorseman 哈哈哈，我刚进公司也是这样，前三天啥事没干，就在搭环境，到后来甚至都不敢关机了。
cbais7890
2017-02-22 00:41:49 +08:00
@sox 给背景图点个赞, 自己画的么
Quaintjade
2017-02-22 01:36:19 +08:00
@Majirefy
跨文件的全局变量可以在调用的文件顶部写 /* Global var1, var2 */ 之类。这只是避免报错，好像和你目的相反。
自动完成那是 VSCode 的功能，基本上你输过一遍之后第二次就自动提示了。

VSCode 毕竟只是编辑器，不是 IDE ，不能期望太多。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/342073

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX