首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
拉勾
V2EX  ›  程序员

准备写一个 Electron 应用,被前端的工作流和工具绕晕了

  •  1
     
  •   skinny · 273 天前 · 7536 次点击
    这是一个创建于 273 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正在准备写一个软件的桌面版,因为考虑到要支持几个平台,如果都要分别写一套 GUI 简直太麻烦了(我知道 Qt 和 QtQuick,但是完全不会 QtQuick,难以写出自己要的效果),而且将来会提供应用本地的 WebServer 功能,所以选择了 Electron 和 NodeJS 解决方案(参考了 vscode 和 GitHub Desktop,以及 Signal )。

    以前几乎没有写过前端代码,印象中的工作流程就是分别写好 html/javascript/css,然后组合起来,即便是现代一点用上 typescript/sass,也是用脚本自动化编译好,然后按印象中工作流程一样处理。可是看到那些新兴热门前端技术框架,想试一试,结果加上 webpack/vue,我感觉一下子搞不懂了,完全没有头绪,搜索了一通如何把 typescript/sass/webpack/vue 组合起来,然后出来一堆 sass-loader/vue-loader/css-loader/style-loader,我头都大了,我预想的最终结果是 javascript 代码(甭管是不是 vue 代码)最终编译打包成了一个单独的 js 文件,所有 sass 代码也都编译打包成一个单独的 css 文件,到底怎么做啊,要不要这么绕这么复杂,我对后端 C#/Python/PHP 工作流就没有这种糟心的体验。

    有没有什么前端指南,可以让我不用把每个包都搜索一遍,每个包的文档都通读一遍?

    P.S 我就一个业余爱好者。

    第 1 条附言  ·  271 天前

    好吧,我最终选择了下面列表中的技术和工具,经过一个个的阅读这些技术和工具的官方文档、脚手架代码,以及几篇 blog,现在已经从零开始挑选了并弄懂了主要相关依赖的作用,并参考官方文档手写了配置文件,其中艰难我都感觉可以写一篇很长的 blog 了。

    • sass: 用的 stylelint 加 stylelint-scss 插件检查代码,规则用的是 stylelint-config-standard 和 stylelint-config-sass-guidelines。
    • react: 我觉得比 vue 好用,更加符合我的直觉、审美和习惯,当然,我目前还没有用 react-redux/react-router,不知道那些会不会非常难。
    • typescript: 除了 webpack.config.js 这种配置文件代码,其余全部用 typescript,特殊构建脚本可以用 ts-node 直接执行。
    • webpack: 这个是真的难用!此外还有 browserify 和零配置的 parcel 作为替代,但这两个目前还没有尝试,还是先试试 webpack 再说。
    • yarn: 真的比 npm 快,而且不设置 registry 镜像下载速度也挺快的。
    • eslint: 我主要用这个检查来 webpack 配置代码,用的内置 eslint:recommended 规则。
    • tslint: 用的是 tslint-react 和 tslint-microsoft-contrib 规则。
    • 此外还有一些 webpack 的加载器和插件、electron 相关,以及 uglify-js,等等

    话说 webpack 是真的不好用!又慢又复杂!

    如果为了完成作品,只是找个脚手架自动生成基本配置(脚手架做了非常多工作),或者找个 demo 改了往里面填代码,我自己会非常没有踏实感,虽然即便自己全手工写配置和挑选工具,也非常难知其然到多少程度,不过至少知道自己在干嘛,这些工具在干嘛吧?!而且那些脚手架生成的配置文件还是要根据需要自己改的,除非你真的非常熟悉这些工具的作用,我不建议不了解相关工具作用原理的人直接上脚手架,不然你修改代码和配置的时候你一定会懵逼。

    参考文档:

    脚手架:

    参考案例:

    • Github Desktop
    • Signal Desktop
    • vscode
    89 回复  |  直到 2018-06-27 17:30:30 +08:00
        1
    whypool   273 天前
    还是 jq 大法好
    不熟悉的会写得怀疑人生
        2
    wxsm   273 天前
    sass-loader/vue-loader/css-loader/style-loader 你完全不需要关注它们的呀。这些只是 webpack 插件而已。核心工具就是 webpack 一个,其它如 vue, typescript, sass 等都不是必须的,但是对提高生产力具有一定帮助。如果你只是初学者的话,建议还是从简单的开始做。
        3
    yamedie   273 天前   ♥ 1
    我也没写过, 但我觉得你应该直接上脚手架 electron-vue 了解一下
        4
    coffeSlider   273 天前 via Android
    单纯的开发 electron,又不一定要玩前端工作流,建几个文件夹自己折腾呗。
        5
    wxsm   273 天前
    楼上说的 jq 也不失为好的解决方案,相对于非职业前端来说。
        6
    xhyzidane   273 天前
    不用框架就行了
        7
    xianxiaobo   273 天前
    要么用 jq,不用那些前端框架,要么使用 cli,比如 angular-cli.不过还是有很多坑
        8
    thinkif   273 天前
    vue 也可以不用 Webpack 之类的,直接当 jQuery 用也是可以的,选择自己最熟悉的方式就好
        9
    lanmingyan   273 天前
    我最近也想写 electron 应用,但是数据库好头疼,不知道怎么管理大量的本地数据
        10
    yamedie   273 天前
    @lanmingyan 多大量? json 纯文本单文件不超过 200MB? 考虑 lowdb
        11
    lanmingyan   273 天前
    @yamedie 做文本图片本地存储的,我也考虑了 lowdb,200M 以上会不会就卡了?
        12
    yamedie   273 天前
    图片没办法存成 json 的吧? 难道要 base64 一遍? 官方的说法是 200M 以上会有性能问题, 不过, 拆成多个文件来存就不太容易出现那种情况吧
        13
    johnniang   273 天前 via Android
    你没有经过系统的学习才会造就现在的无语
        14
    skyworker   273 天前
    坦白来说, 目前前端圈里面玩的东西, 就复杂度而言, 说超过了后端也不为过.
        15
    dsp2138   273 天前
    aardio
    这个工具应该是你的最爱
        16
    soho176   273 天前
    前端的轮子太多了,前端要统治地球的节奏,其实真是搞不懂,明明桌面软件,web 后端开发都有那么成熟的语言了,为啥还要造各种轮子然后用 js 来写那?以后难道别的程序员都可以失业了,就要前端统治一切了。
        17
    ppbaozi   273 天前
    把 webpack 官方的文档过一过就有数了,
        18
    binux   273 天前
    你不需要懂,找个 example 填你自己的代码就完了。
        19
    zhuangzhuang1988   273 天前
    @skyworker 想多了。
        20
    tnt666666   273 天前   ♥ 1
    gaclib 了解下
        21
    ljcarsenal   273 天前
    我怎么感觉 java 的更复杂
        22
    skinny   273 天前
    @coffeSlider
    @xhyzidane

    我最开始选择的就是 jquery/sass/typescript,可是经常看到前端相关的新闻和讨论把 angular/react/vue/webpack 那些夸得那么天上有地下无,就想试试是不是代码能写的更容易,更容易维护,选择 vue 还是因为在那些前端框架里被称为相对简单易用的。我还没有加上 es2015 及更新版本和 babel,以及 gulp 那些呢,因为我知道这几个非常坑,我铁定受不了这种麻烦。
        23
    maichael   273 天前
    @skyworker 想多了,复杂度不高,纯粹是缺乏一些统一的标准,每个人都搞自己的一套,最后把东西越搞越复杂。
        24
    maichael   273 天前
    你需要的是脚手架,你选择所有的东西都自己搭自然会遇到这些问题。
        25
    evanvane   273 天前 via Android
    你需要的是脚手架和一个实例
        26
    kitten23   273 天前
    你想的真多,我就是直接看着文档开干,生撸 html/js/css
        27
    koalli   273 天前
    @soho176 都在说未来能用 js 写的东西会全用 js 来写...瑟瑟发抖...
    微软爸爸的 TypeScript 的理念和前景还是不错的
        28
    marcong95   273 天前   ♥ 1
    @soho176 这世上本来没有前端,写 HTML/CSS/JS 的人多了,便有了前端。窃以为造一堆轮子用 JS 来写各种东西才是把前端扳回软件开发的正道。毕竟我们还是顶着的是前端开发工程师这个 title,总不能一天到晚干着切图的事情
        29
    Yokira   273 天前
    你可以直接使用 https://github.com/SimulatedGREG/electron-vue/ 来做,不过这个脚手架里面用的 Electron 用的是 1.X 的版本,如果要用最新版的,需要自己折腾一下。
        30
    marcong95   273 天前
    至于想要简单粗暴,快速出货的,jQuery 还是可以一战的,还有各种 cli
        31
    searene   273 天前
    webpack,sass,typescript 这些东西不用的话也没关系。

    https://github.com/electron/electron-quick-start

    clone 下来就能用,那些高端的前端框架一个没有,直接写 html/javascript/css 就行
        32
    murmur   273 天前   ♥ 1
    electron 就是给网页包个壳,换句话说纯页面包壳就像个应用,还有 node 环境可以让你做一些浏览器做不了的东西
    前端你学的所有东西都可以用,jquery 当然是可以的
        33
    Rheinmetal   273 天前   ♥ 1
    js - node - electron - - webpack/parcel
    按这个顺序慢慢来
    学 java 只懂语法上来直接让你配一个 spring+R
    前端工具还更乱一点 abbitMQ 一样能被绕晕
        34
    icyalala   273 天前
    如果熟悉 Java 的话,推荐 JavaFX 试试。(熟悉 C# 那也没问题,反正都差不多 : )
    跨平台,Java 的库都能用,WebServer 功能更是看家本领。
    UI 底层是 OpenGL,跨平台完全一致,想要定制界面也支持 CSS。
    即使带着 JRE 打包,体积也不会超过 Electron。

    还有,即使代码放着不动再过几年拿最新的 Maven 和 IDE 也能直接跑得起来~~
        35
    icyalala   273 天前
    @icyalala 对了,如果懒得写界面,还能用 Scene Builder 直接拖控件,还支持一堆第三方 UI 库。
    如果开发过 Android,那 JavaFX 这套东西几乎能直接上手了。
        36
    nicevar   273 天前
    如果你没有搞 js 这一套的经验,我只能说折腾这些东西的是已经能用 QtQuick 开发出个半残品了
    下载 QtSDK--->新建 QtQuick 工程--->写 qml+js
    当然如果程序比较复杂,不推荐你用 Qt 来写,毕竟要涉及到 c++
    不过可以考虑 Java,开发桌面程序比较简单,上面说 Java 复杂的纯属胡扯,你说 Java 做 Web 开发配置麻烦我没意见,开发桌面程序什么时候麻烦过
        37
    nikolai   273 天前
    先做减法,能不用的东西都不用,例如 webpack sass TS,直接官方例子抄起来就上
        38
    skinny   273 天前
    @nikolai 就目前我的状态来看,想不被拖延症和这套东西搞到放弃,我是要弃了 vue 和 webpack 了,typescript 倒是还好。先再坚持一两天试试,到时候还是觉得一头雾水再减掉 vue 那些。
        39
    lolizeppelin   273 天前 via Android
    18 楼才是正道

    你不需要懂也能开撸的
        40
    cheesea   273 天前
    是的,前端的东西,又多又杂,毫无章法,各玩各的。
        41
    notreami   273 天前
    @binux PHP 也是这样,不需要懂,连教程都不需要,找个模版,一键安装,不断点下一步就可以了。
        42
    q8164305   273 天前
    你把 angular 理解成 java,vue 理解成 php,就能理解为什么前端这么乱了,你同时学后端好几种语言你也会哭的,现在前端的情况就是不同框架做的事都差不多,就跟当年后端语言之争一样,vue 是最好的框架,是不是这句话喊起来一点都不违和,手动滑稽
        43
    jin5354   273 天前   ♥ 7
    为什么会觉得一个以前几乎没有写过前端代码的业务爱好者凭着 N 年前的印象就能轻松驾驭最新的前端技术栈呢
    不写前端的都是大佬,惹不起
        44
    womaomao   273 天前
    我前段时间也这样,先用原生需要学习布局--太复杂放弃,然后学 vue+elementui 还有很多周边的工具--太多了放弃,最后选择 jq+bootstrap+easyUI 可以一战,做了几个页面后产品没人管了😞,
        45
    murmur   273 天前
    @jin5354 他如果用用 vue 就知道了
    还真可以
    只要结构清晰
    脚手架够友好
        46
    overflowHidden   273 天前
    @jin5354 #42 我也觉得好笑,好像在某些人看来前端新的东西上手难度高就等于前端技术混乱。
        47
    zoffy   273 天前
    前端跨平台+打包+技术选型+各种优化,如果还是 10 年前那种 JavaScript 随便写的心态,根本玩不下去
        48
    agagega   273 天前
    QML ?
        49
    littlebaozi   273 天前
    从 0 开始撸是要奔溃的。可以用别人的脚手架: https://github.com/SimulatedGREG/electron-vue
        50
    terax   273 天前 via iPad
    哼,让你们再说前端简单。
        51
    zkwap   273 天前
    本来可以一个文件搞定的,由于各种乱七八糟的原因被搞的乱七八糟
        52
    ucanuup   273 天前
    是的,前端发展很快,造了很多质量参差不齐的轮子,没有统一的规范,非常之乱。
        53
    UnluckyNinja   273 天前
    electron-vue : https://github.com/SimulatedGREG/electron-vue
    直接 vue-cli 生成,该配置的作者都配置好了,其它的可以边弄边学,from scratch 的话很容易 X-Y 问题(直接用模板也可能 X-Y 问题,但要短一点)
        54
    djyde   273 天前
    额。React TypeScript 的技术栈,完全可以不使用 webpack..
        55
    353943780   273 天前
    最近才写了一个前端工作流客户端也是基于 Electron,https://legoflow.com/ ,下载安装直接开干!不用装各种麻烦的依赖,工作流嘛,就像你说的 html,scss,js 三个部分组成。
        56
    0Kelvin   273 天前
    环境可以考虑下 vue-cli 3.0.x beta,非常简单易用,前些天用 2.9.6 自己构建,搞到吐血才搞好,各种配置和包安装的有问题。。。
        57
    coderfox   273 天前 via Android
    @lanmingyan #10 不可以用 SQLite 吗
        58
    onvno   273 天前
    用 vue/react 得配合 webpack, 用到 es6 语法又需要配置 babelrc。不是搞什么复杂项目,直接使用 js + less + gulp 这种短平快组合就行,electron 使用 Queryj 有点小坑,需要自己趟一下。
        59
    inflationaaron   273 天前
    @soho176 浏览器真的是跨平台最佳实现了,借着这股东风没问题。
        60
    blless   273 天前 via iPhone
    我最直观的感受就是前端现在的项目,用 webstorm 打开还有各种报错…感觉连 import 语法都没统一,尝试了一下感觉真的难受。
        61
    kisnows   273 天前
    @djyde #54 不用 webpack,那你模块依赖这些怎么办
        62
    djyde   273 天前
    @kisnows #61 electron 的 require 是原生的 commonjs 啊
        63
    kisnows   273 天前
    @djyde #62 哦,那就是说用 ts 自带的编译直接编译到 js,打包这些都不要。
        64
    bombless   273 天前 via Android
    webpack 一般用别人分享出来的改,从头开始写它的配置文件有点艰难。要不就不要用 webpack 了,确实也不是必须用
        65
    bombless   273 天前 via Android
    webpack 本身也不解决依赖,你是用 nodejs 去解决依赖
        66
    seki   273 天前
    electron-webpack 了解一下,基本可以摆脱配置专心写代码
        67
    mauve   273 天前 via Android
    抄起 Angular 就是干
        68
    PythonAnswer   273 天前
    pyqt 感觉快上好多. js 工具链太长了...
        69
    marcushbs   272 天前
    @blless 上 vsc 吧,开箱即用
        70
    lightening   272 天前
    Webpack 就是 make 或者 ant 或者 maven 的角色啊。
        71
    sodatea   272 天前
    npm install -g @vue/cli
    vue ui

    然后在 UI 界面里装 electron plugin、新建项目、启动项目……
    Vue CLI 3.0 的 UI 界面超好用
        72
    simo   272 天前   ♥ 2
    语言本身的缺陷,又不断盲目吸取其他语言的特性,变的不伦不类;工程化弱鸡,没有主流的工具库生产方,门槛超低,导致各种奇葩的工具 /库 /插件的产生。
    typescript 你赢了! c#,java 们,赶紧来淘汰前端开发吧
        73
    DT27   272 天前
    @simo 说得好
        74
    asdf123101   272 天前 via Android
    直接脚手架就好了。另外我觉得 Java 刚上来的配置更复杂。
        75
    jimages   272 天前
    一天开左舵车,一天开右舵车,开的屁滚尿流。
        76
    ala2008   272 天前
    基于 Eclipse 二次加工,很多软件都是这么干的
        77
    raawaa   272 天前
    你还没遇到过 electron 要调用 sqlite 的情况呢。那个更尴尬。
        78
    ashanyue88   272 天前
    你直接 html js 写好就行了
        79
    Bramblex2   272 天前 via iPhone
    @simo 都是搬砖码农还谁瞧不起谁的,那些写 curd 的也淘汰了吧
        80
    duan602728596   272 天前
    nwjs + webpack + react 的项目:
    github.com/duan602728596/48tools
    github.com/duan602728596/qqtools

    electron + webpack + vue 的项目:
    github.com/duan602728596/weibo-auto-check-in-tool

    都算是单页面应用,js 和 node 混合编程 ,你可以参考一下这几个项目
    刚才回错帖子了,蛋疼啊
        81
    hyyou2010   272 天前
    楼主,我跟你一样迷茫,这是因为从总体角度和从历史角度介绍前端开发流程的文章比较少。

    我推荐下面几个链接给你,或许有帮助:
    https://zhuanlan.zhihu.com/p/38209210 向恐龙解释现代 JavaScript

    两篇介绍前端开发流程的英文文章,搜索关键词是“ npm frontend workflow ”:
    https://morocco.js.org/tutorials/npm-based-front-end-workflow/
    http://jsforallof.us/2015/02/12/utilising-node-and-npm-for-front-end-development-workflow/

    似乎也有各种脚手架工具,一行命令帮你搞定,然而依我的愚钝,我觉得慢一点,大体搞清流程比较踏实。

    我整理一下前端开发的工具结构(注意,我也菜鸟一只,不一定对):
    npm 是出自 nodejs 的包管理工具,前端融入了这个工具
    webpack 是通过 npm 安装的第三工具方库,这个库通过自己的 loader 接口又可以融入其他第三方工具
    层次相当于 npm------webpack--------webpack 可以 load 的其他库
        82
    Jaeger   272 天前
    欢迎来到前端的世界
        83
    shintendo   272 天前
    @hyyou2010

    按我理解,npm 是包管理工具,webpack 是构建工具,两者没有你说的这种层级关系吧……
        84
    2pen   272 天前
    @soho176 不是想统治地球,就是给大家多一种选择吧。我做前端的。有时候公司里没人会写桌面应用的时候,就可以考虑 electron。就是给各人给公司都多了一种选择
        85
    hyyou2010   272 天前
    @shintendo
    我这个说法也许模糊,我是想说明这个:一般通过 npm 安装 webpack,另外一般不直接运行 webpack 命令,而是将其命令写入 package.json 里面 script 里面,最终用 npm run xxxx 来运行,从这个角度看 webpack 被 npm 包裹,可算两个层级。
        86
    shintendo   271 天前
    @hyyou2010
    但是对于 npm 来说,webpack 是一个普通的包,和其它的依赖包是同级的,而非 npm 管 webpack,webpack 管其它依赖
        87
    mingyun   271 天前
    前端的确是跟不上了
        88
    skinny   271 天前
    @hyyou2010 谢谢。
        89
    mercurygear   266 天前
    楼主,你别折腾 webpack、babel、vue 这些,Electron 现在带的 V8 是很新的版本,完全可以直接抛掉那些用 ES2015+HTML5+CSS3 开撸,够你用了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1036 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 18:16 · PVG 02:16 · LAX 11:16 · JFK 14:16
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1