正在准备写一个软件的桌面版,因为考虑到要支持几个平台,如果都要分别写一套 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 我就一个业余爱好者。
好吧,我最终选择了下面列表中的技术和工具,经过一个个的阅读这些技术和工具的官方文档、脚手架代码,以及几篇 blog,现在已经从零开始挑选了并弄懂了主要相关依赖的作用,并参考官方文档手写了配置文件,其中艰难我都感觉可以写一篇很长的 blog 了。
话说 webpack 是真的不好用!又慢又复杂!
如果为了完成作品,只是找个脚手架自动生成基本配置(脚手架做了非常多工作),或者找个 demo 改了往里面填代码,我自己会非常没有踏实感,虽然即便自己全手工写配置和挑选工具,也非常难知其然到多少程度,不过至少知道自己在干嘛,这些工具在干嘛吧?!而且那些脚手架生成的配置文件还是要根据需要自己改的,除非你真的非常熟悉这些工具的作用,我不建议不了解相关工具作用原理的人直接上脚手架,不然你修改代码和配置的时候你一定会懵逼。
参考文档:
脚手架:
参考案例:
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 OP @coffeSlider
@xhyzidane 我最开始选择的就是 jquery/sass/typescript,可是经常看到前端相关的新闻和讨论把 angular/react/vue/webpack 那些夸得那么天上有地下无,就想试试是不是代码能写的更容易,更容易维护,选择 vue 还是因为在那些前端框架里被称为相对简单易用的。我还没有加上 es2015 及更新版本和 babel,以及 gulp 那些呢,因为我知道这几个非常坑,我铁定受不了这种麻烦。 |
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 OP @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
是的,前端的东西,又多又杂,毫无章法,各玩各的。
|
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 可以一战,做了几个页面后产品没人管了😞,
|
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 语法都没统一,尝试了一下感觉真的难受。
|
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 工具链太长了...
|
70
lightening 2018-06-21 04:53:37 +08:00
Webpack 就是 make 或者 ant 或者 maven 的角色啊。
|
71
sodatea 2018-06-21 07:46:32 +08:00
|
72
simo 2018-06-21 08:43:38 +08:00 2
语言本身的缺陷,又不断盲目吸取其他语言的特性,变的不伦不类;工程化弱鸡,没有主流的工具库生产方,门槛超低,导致各种奇葩的工具 /库 /插件的产生。
typescript 你赢了! c#,java 们,赶紧来淘汰前端开发吧 |
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 写好就行了
|
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
欢迎来到前端的世界
|
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
前端的确是跟不上了
|
89
mercurygear 2018-06-27 17:30:30 +08:00
楼主,你别折腾 webpack、babel、vue 这些,Electron 现在带的 V8 是很新的版本,完全可以直接抛掉那些用 ES2015+HTML5+CSS3 开撸,够你用了
|
90
zkwap 2020-04-12 17:46:10 +08:00
你对前端的感觉很对,前端就是这么乱
|