This topic created in 3359 days ago, the information mentioned may be changed or developed.
最近想学学前端。
简单来说，大概是被 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 replies • 2017-02-23 11:09:54 +08:00
 |
1
chairuosen Feb 21, 2017
有个东西叫 yeoman
|
 |
2
Majirefy OP @chairuosen 但是很多库都没有 yeoman 吧……
|
|
3
Majirefy OP @chairuosen 为什么不能 npm 统一所有的东西呢……
|
|
4
chairuosen Feb 21, 2017
|
|
5
Majirefy OP @chairuosen 脚手架功能可以通过包管理器执行啦。
譬如 npm install 完之后，执行相关的命令，完成脚手架的工作 |
|
6
chairuosen Feb 21, 2017
@Majirefy 这样会比较混乱吧，一个东西只干一件事。
|
 |
7
sox Feb 21, 2017  2
搭车出 https://vbuild.js.org/ 重新定义 Webpack + Vue.js 开发体验 🤧
|
|
8
Majirefy OP @chairuosen
然后问问， ESLint 怎么识别我在 HTML 中的引入的 JS 啊……比如我引入了 a.js ，我想在 b.js 中用 a 里面的各种东西…… |
 |
9
whitev2 Feb 21, 2017 via Android
这个不是前端太追新造成的工具泛滥“问题”么
|
|
11
sox Feb 21, 2017
|
 |
12
murmur Feb 21, 2017
(1)下载 webstorm
(2)订阅 (3)愉快开发 |
 |
17
coderluan Feb 21, 2017
如果楼主不是做大型游戏，建议楼主试试国产的 Egret 或者 LayaAir 。
就用引擎本身，配套的 IDE 都不用，都支持 typescript ， DEMO/API/Q&A 都比较完善。 然后选择一个最常用的 JS 开发工具，我用 VScode （偶尔用下，所以没买 webstorm ），安装 ESLint 插件。 需要服务器就弄个 nodejs ，之后就完全是 js 编程了，没烂七八糟的。 有游戏的基础概念（场景，精灵之类的），大概不用一个小时就能撸个 Tic-Tac-Toe 。 |
 |
18
sokis Feb 21, 2017
我觉得，应该要手把手教教楼主。。感觉是小白兔。。
|
 |
19
ByZHkc3 Feb 21, 2017
前端确实乱，懒得吐槽了。工具链一环扣一环，虽然我现在也是专门做 ionic ，但是对集成化很高的前端构建工具完全没好感。
|
|
20
chairuosen Feb 21, 2017
@Majirefy 你的意思是 a 里面方法是 foo ，你在 b 里面调了 a.bar ，希望 ESLint 给你报错？ ESLint 是检查语法规范的，应该管不了这事
|
|
21
Majirefy OP |
|
22
chairuosen Feb 21, 2017
@Majirefy 我不知道有啥工具能实现报错，能实现自动提示的倒是有一堆。报错这个应该比较困难，因为 js 运行时对象是可变的，静态分析无法知道某个属性一定没有。
|
|
23
Majirefy OP @chairuosen 所以才有了 TS ……原来如此~
|
 |
24
yuxuan Feb 21, 2017
前端再也不是那种学习下 HTML 、 css 、 js 开个记事本就能上浏览器学习的时候了
|
 |
25
zhouyg Feb 21, 2017
我也用 pixi 写游戏，感觉简单的一匹。当然我不用 ts
|
 |
26
loading Feb 21, 2017 via Android
jQuery ，开箱即用！
|
 |
30
Aixtuz Feb 21, 2017
突然想起之前一个每每配环境总是出错，来 v 站梨花带雨发帖哭诉的妹子，不知道她现在怎么样了...
|
|
31
Majirefy OP |
 |
32
laogui Feb 21, 2017
我 2001 年开始做网站， windows 自带的记事本 + IE 浏览器，有这两样就完成了整个网站的制作
|
 |
34
dumbass Feb 21, 2017
为什么我觉得 java 才是搭环境到放弃，刚进公司时把整个项目跑起来都把我折腾死了，然后我一个不小心更新了所有代码，就开始报错，然后重新开始搭环境 T_T
|
 |
36
ferrum Feb 21, 2017 via iPhone
现在这些框架都有 template 啊， vue 有 vue-cli ， react 和 angular 也有类似的东西，基本上只要 git clone ， npm install 后就能直接开写。
npm 用淘宝的源，解决一下 node-sass 的安装问题，也算是很流畅的开发体验了。 你要从零开始，安装 node.js ，使用 npm 一个一个依赖地安装，然后自己动手写 webpack.config.js 是比较麻烦，但也是一劳永逸的东西。 |
|
37
Majirefy OP @ferrum 的确是这样。自己弄 webpack ，各种 lint ，还有 babel 之类的东西，虽然很麻烦，但是如果能自己走一遍下来，基本也就掌握了，毕竟都是前端开发必须掌握的知识。有 CLI 最好，没有的话也只能自己来了。想自己来一遍的主要原因就是想理解这些工具的用法，这样当没有 CLI 和 template 的时候，也能尽可能搭建起来一套完整的开发环境， happy coding
|
|
38
Majirefy OP @bojackhorseman 哈哈哈，我刚进公司也是这样，前三天啥事没干，就在搭环境，到后来甚至都不敢关机了。
|
 |
40
Quaintjade Feb 22, 2017 via Android
@Majirefy
跨文件的全局变量可以在调用的文件顶部写 /* Global var1, var2 */ 之类。这只是避免报错，好像和你目的相反。 自动完成那是 VSCode 的功能，基本上你输过一遍之后第二次就自动提示了。 VSCode 毕竟只是编辑器，不是 IDE ，不能期望太多。 |
|
41
Majirefy OP @Quaintjade 也对，看来要买个 WEBSTORM 了
|
 |
42
Ahri Feb 22, 2017
楼主需要全家桶，比如 Meteor 。
|
 |
43
XueRainey Feb 22, 2017
Java 、 C#这种“开箱即用”，楼主你是怎么做到的。为什么感觉 Java 和 C#才是从搭建环境到放弃
|
 |
46
Xrong Feb 22, 2017
说真的，很多语言的搭环境都是痛点。。。当然也有可能是自身水平问题
|
 |
47
darksc Feb 22, 2017
啊哈哈哈，逗啊。啊哈哈。
|
 |
50
shunia Feb 22, 2017
vscode 天然支持 js 之间的 auto complete 啊.
跟 html 毛关系没有. |
 |
51
bk201 Feb 22, 2017
po 主深陷工具流的漩涡。
|
 |
53
sighforever Feb 22, 2017
其实，你只需要一个 helloworld.html 文件就好了
|
|
54
shunia Feb 22, 2017
@Majirefy 哎...算我那么说不准确好了,其实也挺简单的. vs code 在 javascript 语境下,非 node.js 上的 intellisence 基本都依赖于.d.ts 文件. 查一下`typings`的用法,用`typings`下载一个 pixi.js 的定义文件就好了.
|
 |
55
zwhu Feb 22, 2017
您能用 java6 写 java8 的特性？
你想用 java6 写 java8 的特性怎么做？ 同理，你只想写 ES6 ，那你就别兼容低版本浏览器啊，纠结什么？ |
|
57
Ahri Feb 22, 2017
楼主是来版聊的。。。
|
 |
59
Rice Feb 22, 2017 via iPhone
累，前端搭环境就是累！
特别是用 windows ，那就是更累。 |
 |
60
yunji3344 Feb 22, 2017
记事本加 chrome 的只能路过了
|
 |
61
4641585 Feb 22, 2017
等等，我记得这句话不是说 Java 的吗？
|
 |
62
qdwang Feb 22, 2017
而且会让机器 cpu 一直占用很高。。。因为各种不断编译。。。 js 效率又低。。搞得 cpu 一直在运转。。
|
 |
64
xiadd Feb 22, 2017
eslinty 一般配合编辑器的插件用，可以检测不符合规范的编码
|
|
66
qdwang Feb 22, 2017
@xwartz 主要是看它是不是一直在运作， java 如果不运作，怎么会占用 cpu 呢？ 我的意思就是一边开发一遍用构建工具，会让构建工具一直在编译在跑 cpu 。传统语言的编译通常是 c++写的，效率高。前端的构建工具大多都是 js 写的，效率低，所以要跑的时间久。
|
 |
67
Lumend Feb 22, 2017
很简单的
|
 |
71
srlp Feb 23, 2017 via iPhone
|
Select Language