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

[skinny]

正在准备写一个软件的桌面版，因为考虑到要支持几个平台，如果都要分别写一套 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 了。

• 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
• 软件包的官方文档

脚手架：

• create-react-app
• create-react-app-typescript

参考案例：

• Github Desktop
• Signal Desktop
• vscode

[whypool]

还是 jq 大法好
不熟悉的会写得怀疑人生

[wxsm]

sass-loader/vue-loader/css-loader/style-loader 你完全不需要关注它们的呀。这些只是 webpack 插件而已。核心工具就是 webpack 一个，其它如 vue, typescript, sass 等都不是必须的，但是对提高生产力具有一定帮助。如果你只是初学者的话，建议还是从简单的开始做。

[yamedie]

我也没写过, 但我觉得你应该直接上脚手架 electron-vue 了解一下

[coffeSlider]

单纯的开发 electron，又不一定要玩前端工作流，建几个文件夹自己折腾呗。

[wxsm]

楼上说的 jq 也不失为好的解决方案，相对于非职业前端来说。

[xhyzidane]

不用框架就行了

[xianxiaobo]

要么用 jq，不用那些前端框架，要么使用 cli，比如 angular-cli.不过还是有很多坑

[thinkif]

vue 也可以不用 Webpack 之类的，直接当 jQuery 用也是可以的，选择自己最熟悉的方式就好

[lanmingyan]

我最近也想写 electron 应用，但是数据库好头疼，不知道怎么管理大量的本地数据

[yamedie]

@lanmingyan 多大量? json 纯文本单文件不超过 200MB? 考虑 lowdb

[lanmingyan]

@yamedie 做文本图片本地存储的，我也考虑了 lowdb，200M 以上会不会就卡了？

[yamedie]

图片没办法存成 json 的吧? 难道要 base64 一遍? 官方的说法是 200M 以上会有性能问题, 不过, 拆成多个文件来存就不太容易出现那种情况吧

[johnniang]

你没有经过系统的学习才会造就现在的无语

[skyworker]

坦白来说, 目前前端圈里面玩的东西, 就复杂度而言, 说超过了后端也不为过.

[dsp2138]

aardio
这个工具应该是你的最爱

[soho176]

前端的轮子太多了，前端要统治地球的节奏，其实真是搞不懂，明明桌面软件，web 后端开发都有那么成熟的语言了，为啥还要造各种轮子然后用 js 来写那？以后难道别的程序员都可以失业了，就要前端统治一切了。

[xPKK1qofAr6RR09O]

把 webpack 官方的文档过一过就有数了，

[binux]

你不需要懂，找个 example 填你自己的代码就完了。

[zhuangzhuang1988]

@skyworker 想多了。

[tnt666666]

gaclib 了解下

[ljcarsenal]

我怎么感觉 java 的更复杂

[skinny]

@coffeSlider
@xhyzidane

我最开始选择的就是 jquery/sass/typescript，可是经常看到前端相关的新闻和讨论把 angular/react/vue/webpack 那些夸得那么天上有地下无，就想试试是不是代码能写的更容易，更容易维护，选择 vue 还是因为在那些前端框架里被称为相对简单易用的。我还没有加上 es2015 及更新版本和 babel，以及 gulp 那些呢，因为我知道这几个非常坑，我铁定受不了这种麻烦。

[maichael]

@skyworker 想多了，复杂度不高，纯粹是缺乏一些统一的标准，每个人都搞自己的一套，最后把东西越搞越复杂。

[maichael]

你需要的是脚手架，你选择所有的东西都自己搭自然会遇到这些问题。

[evanvane]

你需要的是脚手架和一个实例

[kitten23]

你想的真多，我就是直接看着文档开干，生撸 html/js/css

[koalli]

@soho176 都在说未来能用 js 写的东西会全用 js 来写...瑟瑟发抖...
微软爸爸的 TypeScript 的理念和前景还是不错的

[marcong95]

@soho176 这世上本来没有前端，写 HTML/CSS/JS 的人多了，便有了前端。窃以为造一堆轮子用 JS 来写各种东西才是把前端扳回软件开发的正道。毕竟我们还是顶着的是前端开发工程师这个 title，总不能一天到晚干着切图的事情

[Yokira]

你可以直接使用 https://github.com/SimulatedGREG/electron-vue/ 来做，不过这个脚手架里面用的 Electron 用的是 1.X 的版本，如果要用最新版的，需要自己折腾一下。

[marcong95]

至于想要简单粗暴，快速出货的，jQuery 还是可以一战的，还有各种 cli

[searene]

webpack，sass，typescript 这些东西不用的话也没关系。

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

clone 下来就能用，那些高端的前端框架一个没有，直接写 html/javascript/css 就行

[murmur]

electron 就是给网页包个壳，换句话说纯页面包壳就像个应用，还有 node 环境可以让你做一些浏览器做不了的东西
前端你学的所有东西都可以用，jquery 当然是可以的

[Rheinmetal]

js - node - electron - - webpack/parcel
按这个顺序慢慢来
学 java 只懂语法上来直接让你配一个 spring+R
前端工具还更乱一点 abbitMQ 一样能被绕晕

[icyalala]

如果熟悉 Java 的话，推荐 JavaFX 试试。(熟悉 C# 那也没问题，反正都差不多 : )
跨平台，Java 的库都能用，WebServer 功能更是看家本领。
UI 底层是 OpenGL，跨平台完全一致，想要定制界面也支持 CSS。
即使带着 JRE 打包，体积也不会超过 Electron。

还有，即使代码放着不动再过几年拿最新的 Maven 和 IDE 也能直接跑得起来~~

[icyalala]

@icyalala 对了，如果懒得写界面，还能用 Scene Builder 直接拖控件，还支持一堆第三方 UI 库。
如果开发过 Android，那 JavaFX 这套东西几乎能直接上手了。

[nicevar]

如果你没有搞 js 这一套的经验，我只能说折腾这些东西的是已经能用 QtQuick 开发出个半残品了
下载 QtSDK--->新建 QtQuick 工程--->写 qml+js
当然如果程序比较复杂，不推荐你用 Qt 来写，毕竟要涉及到 c++
不过可以考虑 Java，开发桌面程序比较简单，上面说 Java 复杂的纯属胡扯，你说 Java 做 Web 开发配置麻烦我没意见，开发桌面程序什么时候麻烦过

[nikolai]

先做减法，能不用的东西都不用，例如 webpack sass TS，直接官方例子抄起来就上

[skinny]

@nikolai 就目前我的状态来看，想不被拖延症和这套东西搞到放弃，我是要弃了 vue 和 webpack 了，typescript 倒是还好。先再坚持一两天试试，到时候还是觉得一头雾水再减掉 vue 那些。

[lolizeppelin]

18 楼才是正道

你不需要懂也能开撸的

[cheesea]

是的，前端的东西，又多又杂，毫无章法，各玩各的。

[notreami]

@binux PHP 也是这样，不需要懂，连教程都不需要，找个模版，一键安装，不断点下一步就可以了。

[q8164305]

你把 angular 理解成 java,vue 理解成 php,就能理解为什么前端这么乱了,你同时学后端好几种语言你也会哭的,现在前端的情况就是不同框架做的事都差不多,就跟当年后端语言之争一样,vue 是最好的框架,是不是这句话喊起来一点都不违和,手动滑稽

[jin5354]

为什么会觉得一个以前几乎没有写过前端代码的业务爱好者凭着 N 年前的印象就能轻松驾驭最新的前端技术栈呢
不写前端的都是大佬，惹不起

[womaomao]

我前段时间也这样，先用原生需要学习布局--太复杂放弃，然后学 vue+elementui 还有很多周边的工具--太多了放弃，最后选择 jq+bootstrap+easyUI 可以一战，做了几个页面后产品没人管了😞，

[murmur]

@jin5354 他如果用用 vue 就知道了
还真可以
只要结构清晰
脚手架够友好

[overflowHidden]

@jin5354 #42 我也觉得好笑，好像在某些人看来前端新的东西上手难度高就等于前端技术混乱。

[zoffy]

前端跨平台+打包+技术选型+各种优化，如果还是 10 年前那种 JavaScript 随便写的心态，根本玩不下去

[agagega]

QML ？

[littlebaozi]

从 0 开始撸是要奔溃的。可以用别人的脚手架： https://github.com/SimulatedGREG/electron-vue

[terax]

哼，让你们再说前端简单。

[zkwap]

本来可以一个文件搞定的，由于各种乱七八糟的原因被搞的乱七八糟

[ucanuup]

是的，前端发展很快，造了很多质量参差不齐的轮子，没有统一的规范，非常之乱。

[UnluckyNinja]

electron-vue : https://github.com/SimulatedGREG/electron-vue
直接 vue-cli 生成，该配置的作者都配置好了，其它的可以边弄边学，from scratch 的话很容易 X-Y 问题（直接用模板也可能 X-Y 问题，但要短一点）

[djyde]

额。React TypeScript 的技术栈，完全可以不使用 webpack..

[353943780]

最近才写了一个前端工作流客户端也是基于 Electron，https://legoflow.com/ ，下载安装直接开干！不用装各种麻烦的依赖，工作流嘛，就像你说的 html，scss，js 三个部分组成。

[0Kelvin]

环境可以考虑下 vue-cli 3.0.x beta，非常简单易用，前些天用 2.9.6 自己构建，搞到吐血才搞好，各种配置和包安装的有问题。。。

[coderfox]

@lanmingyan #10 不可以用 SQLite 吗

[onvno]

用 vue/react 得配合 webpack, 用到 es6 语法又需要配置 babelrc。不是搞什么复杂项目，直接使用 js + less + gulp 这种短平快组合就行，electron 使用 Queryj 有点小坑，需要自己趟一下。

[inflationaaron]

@soho176 浏览器真的是跨平台最佳实现了，借着这股东风没问题。

[blless]

我最直观的感受就是前端现在的项目，用 webstorm 打开还有各种报错…感觉连 import 语法都没统一，尝试了一下感觉真的难受。

[kisnows]

@djyde #54 不用 webpack，那你模块依赖这些怎么办

[djyde]

@kisnows #61 electron 的 require 是原生的 commonjs 啊

[kisnows]

@djyde #62 哦，那就是说用 ts 自带的编译直接编译到 js，打包这些都不要。

[bombless]

webpack 一般用别人分享出来的改，从头开始写它的配置文件有点艰难。要不就不要用 webpack 了，确实也不是必须用

[bombless]

webpack 本身也不解决依赖，你是用 nodejs 去解决依赖

[seki]

electron-webpack 了解一下，基本可以摆脱配置专心写代码

[mauve]

抄起 Angular 就是干

[PythonAnswer]

pyqt 感觉快上好多. js 工具链太长了...

[marcushbs]

@blless 上 vsc 吧，开箱即用

[lightening]

Webpack 就是 make 或者 ant 或者 maven 的角色啊。

[sodatea]

npm install -g @vue/cli
vue ui

然后在 UI 界面里装 electron plugin、新建项目、启动项目……
Vue CLI 3.0 的 UI 界面超好用

[simo]

语言本身的缺陷，又不断盲目吸取其他语言的特性，变的不伦不类；工程化弱鸡，没有主流的工具库生产方，门槛超低，导致各种奇葩的工具 /库 /插件的产生。
typescript 你赢了！ c#，java 们，赶紧来淘汰前端开发吧

[DT27]

@simo 说得好

[asdf123101]

直接脚手架就好了。另外我觉得 Java 刚上来的配置更复杂。

[jimages]

一天开左舵车，一天开右舵车，开的屁滚尿流。

[ala2008]

基于 Eclipse 二次加工，很多软件都是这么干的

[raawaa]

你还没遇到过 electron 要调用 sqlite 的情况呢。那个更尴尬。

[ashanyue88]

你直接 html js 写好就行了

[Bramblex2]

@simo 都是搬砖码农还谁瞧不起谁的，那些写 curd 的也淘汰了吧

[duan602728596]

nwjs + webpack + react 的项目：
github.com/duan602728596/48tools
github.com/duan602728596/qqtools

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

都算是单页面应用，js 和 node 混合编程 ，你可以参考一下这几个项目
刚才回错帖子了，蛋疼啊

[hyyou2010]

楼主，我跟你一样迷茫，这是因为从总体角度和从历史角度介绍前端开发流程的文章比较少。

我推荐下面几个链接给你，或许有帮助：
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 的其他库

[Jaeger]

欢迎来到前端的世界

[shintendo]

@hyyou2010

按我理解，npm 是包管理工具，webpack 是构建工具，两者没有你说的这种层级关系吧……

[2pen]

@soho176 不是想统治地球，就是给大家多一种选择吧。我做前端的。有时候公司里没人会写桌面应用的时候，就可以考虑 electron。就是给各人给公司都多了一种选择

[hyyou2010]

@shintendo
我这个说法也许模糊，我是想说明这个：一般通过 npm 安装 webpack，另外一般不直接运行 webpack 命令，而是将其命令写入 package.json 里面 script 里面，最终用 npm run xxxx 来运行，从这个角度看 webpack 被 npm 包裹，可算两个层级。

[shintendo]

@hyyou2010
但是对于 npm 来说，webpack 是一个普通的包，和其它的依赖包是同级的，而非 npm 管 webpack，webpack 管其它依赖

[mingyun]

前端的确是跟不上了

[skinny]

@hyyou2010 谢谢。

[mercurygear]

楼主，你别折腾 webpack、babel、vue 这些，Electron 现在带的 V8 是很新的版本，完全可以直接抛掉那些用 ES2015+HTML5+CSS3 开撸，够你用了

[zkwap]

你对前端的感觉很对，前端就是这么乱