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

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

  •  1
     
  •   skinny · 2018-06-20 10:03:22 +08:00 · 9159 次点击
    这是一个创建于 515 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正在准备写一个软件的桌面版,因为考虑到要支持几个平台,如果都要分别写一套 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 条附言  ·  2018-06-22 09:21:34 +08:00

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

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

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

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

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

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

    然后在 UI 界面里装 electron plugin、新建项目、启动项目……
    Vue CLI 3.0 的 UI 界面超好用
        72
    simo   2018-06-21 08:43:38 +08:00   ♥ 2
    语言本身的缺陷,又不断盲目吸取其他语言的特性,变的不伦不类;工程化弱鸡,没有主流的工具库生产方,门槛超低,导致各种奇葩的工具 /库 /插件的产生。
    typescript 你赢了! c#,java 们,赶紧来淘汰前端开发吧
        73
    DT27   2018-06-21 08:50:06 +08:00
    @simo 说得好
        74
    asdf123101   2018-06-21 08:51:15 +08:00 via Android
    直接脚手架就好了。另外我觉得 Java 刚上来的配置更复杂。
        75
    jimages   2018-06-21 09:00:42 +08:00
    一天开左舵车,一天开右舵车,开的屁滚尿流。
        76
    ala2008   2018-06-21 09:22:54 +08:00
    基于 Eclipse 二次加工,很多软件都是这么干的
        77
    raawaa   2018-06-21 10:58:24 +08:00
    你还没遇到过 electron 要调用 sqlite 的情况呢。那个更尴尬。
        78
    ashanyue88   2018-06-21 11:04:42 +08:00
    你直接 html js 写好就行了
        79
    Bramblex2   2018-06-21 11:55:53 +08:00 via iPhone
    @simo 都是搬砖码农还谁瞧不起谁的,那些写 curd 的也淘汰了吧
        80
    duan602728596   2018-06-21 12:35:04 +08:00
    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   2018-06-21 13:37:04 +08:00
    楼主,我跟你一样迷茫,这是因为从总体角度和从历史角度介绍前端开发流程的文章比较少。

    我推荐下面几个链接给你,或许有帮助:
    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   2018-06-21 14:26:18 +08:00
    欢迎来到前端的世界
        83
    shintendo   2018-06-21 14:35:15 +08:00
    @hyyou2010

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