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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2614 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近想学学前端。

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

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

71 条回复 • 2017-02-23 11:09:54 +08:00

chairuosen

2017-02-21 15:42:46 +08:00

有个东西叫 yeoman

Majirefy

2017-02-21 15:44:15 +08:00

@chairuosen 但是很多库都没有 yeoman 吧……

Majirefy

2017-02-21 15:44:42 +08:00

@chairuosen 为什么不能 npm 统一所有的东西呢……

chairuosen

2017-02-21 15:47:54 +08:00

@Majirefy
只能说那些库用的人不多。

为什么要统一呢，脚手架管理器和包管理器是两回事啊

Majirefy

2017-02-21 15:51:22 +08:00

@chairuosen 脚手架功能可以通过包管理器执行啦。
譬如 npm install 完之后，执行相关的命令，完成脚手架的工作

chairuosen

2017-02-21 15:58:51 +08:00

@Majirefy 这样会比较混乱吧，一个东西只干一件事。

sox

2017-02-21 15:59:06 +08:00

搭车出 https://vbuild.js.org/ 重新定义 Webpack + Vue.js 开发体验 🤧

Majirefy

2017-02-21 16:02:42 +08:00

@chairuosen
然后问问， ESLint 怎么识别我在 HTML 中的引入的 JS 啊……比如我引入了 a.js ，我想在 b.js 中用 a 里面的各种东西……

whitev2

2017-02-21 16:04:23 +08:00 via Android

这个不是前端太追新造成的工具泛滥“问题”么

Majirefy

2017-02-21 16:05:35 +08:00

@whitev2 差不多吧……感觉好乱啊……

sox

2017-02-21 16:07:09 +08:00

@Majirefy > ESLint 怎么识别我在 HTML 中的引入的 JS 啊……比如我引入了 a.js ，我想在 b.js 中用 a 里面的各种东西……

这和 eslint 有什么关系

murmur

2017-02-21 16:09:47 +08:00

(1)下载 webstorm
(2)订阅
(3)愉快开发

Majirefy

2017-02-21 16:10:27 +08:00

@sox ESLint 不报错啊……而且 Visual Studio Code 怎么对 a.js 中的东西 auto complete ？

sox

2017-02-21 16:11:04 +08:00

@murmur 有道理，就是我的电脑吃不消 /doge

Majirefy

2017-02-21 16:11:48 +08:00

@murmur 有没有别的路径………………………………

murmur

2017-02-21 16:19:55 +08:00

@Majirefy vscode > 1.9 之后记得先改默认的代码高亮配色默认加的不够骚气

coderluan

2017-02-21 16:20:29 +08:00

如果楼主不是做大型游戏，建议楼主试试国产的 Egret 或者 LayaAir 。
就用引擎本身，配套的 IDE 都不用，都支持 typescript ， DEMO/API/Q&A 都比较完善。
然后选择一个最常用的 JS 开发工具，我用 VScode （偶尔用下，所以没买 webstorm ），安装 ESLint 插件。
需要服务器就弄个 nodejs ，之后就完全是 js 编程了，没烂七八糟的。
有游戏的基础概念（场景，精灵之类的），大概不用一个小时就能撸个 Tic-Tac-Toe 。

sokis

2017-02-21 16:27:29 +08:00

我觉得，应该要手把手教教楼主。。感觉是小白兔。。

ByZHkc3

2017-02-21 16:29:41 +08:00

前端确实乱，懒得吐槽了。工具链一环扣一环，虽然我现在也是专门做 ionic ，但是对集成化很高的前端构建工具完全没好感。

chairuosen

2017-02-21 16:30:14 +08:00

@Majirefy 你的意思是 a 里面方法是 foo ，你在 b 里面调了 a.bar ，希望 ESLint 给你报错？ ESLint 是检查语法规范的，应该管不了这事

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 via Android

jQuery ，开箱即用！

Majirefy

2017-02-21 18:55:53 +08:00 via iPhone

@zhouyg 分享点经验呗

Majirefy

2017-02-21 18:56:27 +08:00 via iPhone

@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 via iPhone

现在这些框架都有 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 via iPhone

@ferrum 的确是这样。自己弄 webpack ，各种 lint ，还有 babel 之类的东西，虽然很麻烦，但是如果能自己走一遍下来，基本也就掌握了，毕竟都是前端开发必须掌握的知识。有 CLI 最好，没有的话也只能自己来了。想自己来一遍的主要原因就是想理解这些工具的用法，这样当没有 CLI 和 template 的时候，也能尽可能搭建起来一套完整的开发环境， happy coding

Majirefy

2017-02-22 00:41:37 +08:00 via iPhone

@bojackhorseman 哈哈哈，我刚进公司也是这样，前三天啥事没干，就在搭环境，到后来甚至都不敢关机了。