这是一个创建于 2384 天前的主题，其中的信息可能已经有所发展或是发生改变。
正在准备写一个软件的桌面版，因为考虑到要支持几个平台，如果都要分别写一套 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 改了往里面填代码，我自己会非常没有踏实感，虽然即便自己全手工写配置和挑选工具，也非常难知其然到多少程度，不过至少知道自己在干嘛，这些工具在干嘛吧？！而且那些脚手架生成的配置文件还是要根据需要自己改的，除非你真的非常熟悉这些工具的作用，我不建议不了解相关工具作用原理的人直接上脚手架，不然你修改代码和配置的时候你一定会懵逼。
参考文档：
- react+webpack+typescript
- 软件包的官方文档
脚手架：
参考案例：
- Github Desktop
- Signal Desktop
- vscode
90 条回复 • 2020-04-12 17:46:10 +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
xPKK1qofAr6RR09O 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
你对前端的感觉很对，前端就是这么乱
|
Select Language