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

2018-06-20 10:03:22 +08:00
 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 我就一个业余爱好者。

12820 次点击
所在节点    程序员
90 条回复
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 的其他库
Jaeger
2018-06-21 14:26:18 +08:00
欢迎来到前端的世界
shintendo
2018-06-21 14:35:15 +08:00
@hyyou2010

按我理解,npm 是包管理工具,webpack 是构建工具,两者没有你说的这种层级关系吧……
2pen
2018-06-21 15:53:45 +08:00
@soho176 不是想统治地球,就是给大家多一种选择吧。我做前端的。有时候公司里没人会写桌面应用的时候,就可以考虑 electron。就是给各人给公司都多了一种选择
hyyou2010
2018-06-21 16:37:20 +08:00
@shintendo
我这个说法也许模糊,我是想说明这个:一般通过 npm 安装 webpack,另外一般不直接运行 webpack 命令,而是将其命令写入 package.json 里面 script 里面,最终用 npm run xxxx 来运行,从这个角度看 webpack 被 npm 包裹,可算两个层级。
shintendo
2018-06-22 08:28:10 +08:00
@hyyou2010
但是对于 npm 来说,webpack 是一个普通的包,和其它的依赖包是同级的,而非 npm 管 webpack,webpack 管其它依赖
mingyun
2018-06-22 09:10:09 +08:00
前端的确是跟不上了
skinny
2018-06-22 13:22:13 +08:00
@hyyou2010 谢谢。
mercurygear
2018-06-27 17:30:30 +08:00
楼主,你别折腾 webpack、babel、vue 这些,Electron 现在带的 V8 是很新的版本,完全可以直接抛掉那些用 ES2015+HTML5+CSS3 开撸,够你用了
zkwap
2020-04-12 17:46:10 +08:00
你对前端的感觉很对,前端就是这么乱

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/464295

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX