Majirefy
V2EX  ›  问与答

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

  •  1
     
  •   Majirefy · Feb 21, 2017 · 9217 views
    This topic created in 3547 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
    chairuosen
    chairuosen
    Feb 21, 2017
    1
    有个东西叫 yeoman
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    2
    @chairuosen 但是很多库都没有 yeoman 吧……
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    3
    @chairuosen 为什么不能 npm 统一所有的东西呢……
    chairuosen
    chairuosen
    Feb 21, 2017
    4
    @Majirefy
    只能说那些库用的人不多。

    为什么要统一呢,脚手架管理器和包管理器是两回事啊
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    5
    @chairuosen 脚手架功能可以通过包管理器执行啦。
    譬如 npm install 完之后,执行相关的命令,完成脚手架的工作
    chairuosen
    chairuosen
    Feb 21, 2017
    6
    @Majirefy 这样会比较混乱吧,一个东西只干一件事。
    sox
    sox
    Feb 21, 2017❤️2
    7
    搭车出 https://vbuild.js.org/ 重新定义 Webpack + Vue.js 开发体验 🤧
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    8
    @chairuosen
    然后问问, ESLint 怎么识别我在 HTML 中的引入的 JS 啊……比如我引入了 a.js ,我想在 b.js 中用 a 里面的各种东西……
    whitev2
    whitev2
    Feb 21, 2017 via Android
    9
    这个不是前端太追新造成的工具泛滥“问题”么
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    10
    @whitev2 差不多吧……感觉好乱啊……
    sox
    sox
    Feb 21, 2017
    11
    @Majirefy > ESLint 怎么识别我在 HTML 中的引入的 JS 啊……比如我引入了 a.js ,我想在 b.js 中用 a 里面的各种东西……

    这和 eslint 有什么关系
    murmur
    murmur
    Feb 21, 2017
    12
    (1)下载 webstorm
    (2)订阅
    (3)愉快开发
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    13
    @sox ESLint 不报错啊……而且 Visual Studio Code 怎么对 a.js 中的东西 auto complete ?
    sox
    sox
    Feb 21, 2017
    14
    @murmur 有道理,就是我的电脑吃不消 /doge
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    15
    @murmur 有没有别的路径………………………………
    murmur
    murmur
    Feb 21, 2017
    16
    @Majirefy vscode > 1.9 之后 记得先改默认的代码高亮配色 默认加的不够骚气
    coderluan
    coderluan
    Feb 21, 2017
    17
    如果楼主不是做大型游戏,建议楼主试试国产的 Egret 或者 LayaAir 。
    就用引擎本身,配套的 IDE 都不用,都支持 typescript , DEMO/API/Q&A 都比较完善。
    然后选择一个最常用的 JS 开发工具,我用 VScode (偶尔用下,所以没买 webstorm ),安装 ESLint 插件。
    需要服务器就弄个 nodejs ,之后就完全是 js 编程了,没烂七八糟的。
    有游戏的基础概念(场景,精灵之类的),大概不用一个小时就能撸个 Tic-Tac-Toe 。
    sokis
    sokis
    Feb 21, 2017
    18
    我觉得,应该要手把手教教楼主。。感觉是小白兔。。
    ByZHkc3
    ByZHkc3
    Feb 21, 2017
    19
    前端确实乱,懒得吐槽了。工具链一环扣一环,虽然我现在也是专门做 ionic ,但是对集成化很高的前端构建工具完全没好感。
    chairuosen
    chairuosen
    Feb 21, 2017
    20
    @Majirefy 你的意思是 a 里面方法是 foo ,你在 b 里面调了 a.bar ,希望 ESLint 给你报错? ESLint 是检查语法规范的,应该管不了这事
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    21
    @sokis 爪子已经伸出来啦~求手把手~



    @chairuosen 什么能干这事?
    chairuosen
    chairuosen
    Feb 21, 2017
    22
    @Majirefy 我不知道有啥工具能实现报错,能实现自动提示的倒是有一堆。报错这个应该比较困难,因为 js 运行时对象是可变的,静态分析无法知道某个属性一定没有。
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    23
    @chairuosen 所以才有了 TS ……原来如此~
    yuxuan
    yuxuan
    Feb 21, 2017
    24
    前端再也不是那种学习下 HTML 、 css 、 js 开个记事本就能上浏览器学习的时候了
    zhouyg
    zhouyg
    Feb 21, 2017
    25
    我也用 pixi 写游戏,感觉简单的一匹。当然我不用 ts
    loading
    loading
    Feb 21, 2017 via Android
    26
    jQuery ,开箱即用!
    Majirefy
    Majirefy
    OP
    Feb 21, 2017 via iPhone
    27
    @zhouyg 分享点经验呗
    Majirefy
    Majirefy
    OP
    Feb 21, 2017 via iPhone
    28
    @yuxuan 缅怀一下当年的 FrontPage
    ZhaoMiing
    ZhaoMiing
    Feb 21, 2017
    29
    所以 ng2 官方出了个 @angular/cli
    Aixtuz
    Aixtuz
    Feb 21, 2017
    30
    突然想起之前一个每每配环境总是出错,来 v 站梨花带雨发帖哭诉的妹子,不知道她现在怎么样了...
    Majirefy
    Majirefy
    OP
    Feb 21, 2017
    31
    @ZhaoMiing 没错,从集成化来说,还是 Angular 好,一个命令行能干很多事,而且不用太多的配置……


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

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

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

    VSCode 毕竟只是编辑器,不是 IDE ,不能期望太多。
    Majirefy
    Majirefy
    OP
    Feb 22, 2017 via iPhone
    41
    @Quaintjade 也对,看来要买个 WEBSTORM 了
    Ahri
    Ahri
    Feb 22, 2017
    42
    楼主需要全家桶,比如 Meteor 。
    XueRainey
    XueRainey
    Feb 22, 2017
    43
    Java 、 C#这种“开箱即用”,楼主你是怎么做到的。为什么感觉 Java 和 C#才是从搭建环境到放弃
    Majirefy
    Majirefy
    OP
    Feb 22, 2017
    44
    @Ahri 全家桶套餐隐藏了太多细节。一开始还天真的以为, JavaScript 开发竟然也能和 C#一样开箱即用了……
    Majirefy
    Majirefy
    OP
    Feb 22, 2017
    45
    @XueRainey 还是看公司具体的项目吧……我毕业入职的前三天就在搭开发环境,又一次关机后再开机就跑步起来了,吓得我从来不敢关机了……
    Xrong
    Xrong
    Feb 22, 2017
    46
    说真的,很多语言的搭环境都是痛点。。。当然也有可能是自身水平问题
    darksc
    darksc
    Feb 22, 2017
    47
    啊哈哈哈,逗啊。啊哈哈。
    Majirefy
    Majirefy
    OP
    Feb 22, 2017
    48
    @Xrong 看到不是我一个人卡在搭环境的地方,我就放心了……
    fulvaz
    fulvaz
    Feb 22, 2017
    49
    @sox 我觉得, 你要说说比 vue-cli 好在哪
    shunia
    shunia
    Feb 22, 2017
    50
    vscode 天然支持 js 之间的 auto complete 啊.
    跟 html 毛关系没有.
    bk201
    bk201
    Feb 22, 2017
    51
    po 主深陷工具流的漩涡。
    Majirefy
    Majirefy
    OP
    Feb 22, 2017
    52
    @shunia 我怎么没有感觉出来……譬如 PIXI 还是提示未定义……


    @bk201 被水淹没不知所措
    sighforever
    sighforever
    Feb 22, 2017
    53
    其实,你只需要一个 helloworld.html 文件就好了
    shunia
    shunia
    Feb 22, 2017
    54
    @Majirefy 哎...算我那么说不准确好了,其实也挺简单的. vs code 在 javascript 语境下,非 node.js 上的 intellisence 基本都依赖于.d.ts 文件. 查一下`typings`的用法,用`typings`下载一个 pixi.js 的定义文件就好了.
    zwhu
    zwhu
    Feb 22, 2017
    55
    您能用 java6 写 java8 的特性?

    你想用 java6 写 java8 的特性怎么做?

    同理,你只想写 ES6 ,那你就别兼容低版本浏览器啊,纠结什么?
    Majirefy
    Majirefy
    OP
    Feb 22, 2017 via iPhone
    56
    @shunia 是的,主要是这样下载的和官网的版本不同步
    Ahri
    Ahri
    Feb 22, 2017
    57
    楼主是来版聊的。。。
    sox
    sox
    Feb 22, 2017 via Android
    58
    @fulvaz readme 不是写了吗
    Rice
    Rice
    Feb 22, 2017 via iPhone
    59
    累,前端搭环境就是累!
    特别是用 windows ,那就是更累。
    yunji3344
    yunji3344
    Feb 22, 2017
    60
    记事本加 chrome 的只能路过了
    4641585
    4641585
    Feb 22, 2017
    61
    等等,我记得这句话不是说 Java 的吗?
    qdwang
    qdwang
    Feb 22, 2017
    62
    而且会让机器 cpu 一直占用很高。。。因为各种不断编译。。。 js 效率又低。。搞得 cpu 一直在运转。。
    xwartz
    xwartz
    Feb 22, 2017
    63
    @qdwang cpu 占用, js 怎么也搞不过 Java 吧...
    xiadd
    xiadd
    Feb 22, 2017
    64
    eslinty 一般配合编辑器的插件用,可以检测不符合规范的编码
    Majirefy
    Majirefy
    OP
    Feb 22, 2017
    65
    @xiadd 嗯,错误以为这玩意能代替 IDE 了……
    qdwang
    qdwang
    Feb 22, 2017
    66
    @xwartz 主要是看它是不是一直在运作, java 如果不运作,怎么会占用 cpu 呢? 我的意思就是一边开发一遍用构建工具,会让构建工具一直在编译在跑 cpu 。传统语言的编译通常是 c++写的,效率高。前端的构建工具大多都是 js 写的,效率低,所以要跑的时间久。
    Lumend
    Lumend
    Feb 22, 2017
    67
    很简单的
    Sapp
    Sapp
    Feb 22, 2017 via iPhone
    68
    @Majirefy 你这个应该去 import 相关,和 eslint 有什么关系,它是检查语法
    Sapp
    Sapp
    Feb 22, 2017 via iPhone
    69
    @Rice vue-cli 感觉还不错
    mufeng
    mufeng
    Feb 22, 2017 via iPhone
    70
    @Sapp vue cli and 真是开箱即食
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2152 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 135ms · UTC 04:19 · PVG 12:19 · LAX 20:19 · JFK 23:19
    ♥ Do have faith in what you're doing.