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

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 条回复
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
这个不是前端太追新造成的工具泛滥“问题”么
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 是检查语法规范的，应该管不了这事

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

https://tanronggui.xyz/t/342073

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

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

© 2021 V2EX