V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Macv1994
V2EX  ›  程序员

弱鸡后端求问什么是前端工程化?

  •  
  •   Macv1994 ·
    weijiang1994 · 2021-09-26 09:50:40 +08:00 · 4959 次点击
    这是一个创建于 1187 天前的主题,其中的信息可能已经有所发展或是发生改变。

    layui 官网终于还是要下线,对于 layui 还是比较有感情的,让我这个弱鸡后端也能做出可用相对美观的前端页面,奈何在时代的洪流下最终还是要隐退了。

    求问一下前端大佬,到底什么是前端工程化?

    21 条回复    2021-09-26 20:58:09 +08:00
    nicenonecb
        1
    nicenonecb  
       2021-09-26 10:15:46 +08:00   ❤️ 1
    性能监控,数据埋点,构建优化,ci/cd 等
    brucedone
        2
    brucedone  
       2021-09-26 10:21:06 +08:00
    工程化包含一套完整的流程吧:
    brucedone
        3
    brucedone  
       2021-09-26 10:24:08 +08:00   ❤️ 4
    1. 开发
    统一组件和开发框架,统一语言

    2. 监控
    统一的监控框架体系,打点,监控告警

    3. 日志
    健壮且完整的日志体系

    4. 协作
    git flow 流程化

    5. 构建
    CI/CD

    6. 发布
    容器化

    不是前端大佬,大致的流程体系根据个人经验总结
    Leviathann
        4
    Leviathann  
       2021-09-26 10:29:30 +08:00 via iPhone
    就是 webpack rollup gulp parcel snowpack vite
    Rwing
        5
    Rwing  
       2021-09-26 10:29:54 +08:00   ❤️ 12
    我来做个坏人,说点难听的。

    为什么前端要工程化?是因为之前的前端都无法做到工程化。
    举个简单的例子,如何组织一个项目下两个 js 之间的引用?这在 es6 之前都是无法做到的,后端如果某一个语言做不到两个代码文件或类的互相引用,这个语言会被骂死,都活不过 1 年。
    再来一个例子,任何一个后端语言都有包的概念,这 js 之前也是没有的,如何引用一个别人的库,只能是页面上引用 js,害怕各种冲突。

    所以,所谓的前端工程化,不过是把后端的东西都搬到前端来,让 js 这门语言真的像一门语言。
    wszgrcy
        6
    wszgrcy  
       2021-09-26 10:41:15 +08:00
    用代码去生成代码,即为工程化
    用人生成代码,那是电子搬砖
    Rrrrrr
        7
    Rrrrrr  
       2021-09-26 11:12:41 +08:00
    首先你就是觉得前端就是简单的,不需要工程化。后端不用理解,反正你们又不写前端
    lancelock
        8
    lancelock  
       2021-09-26 11:16:32 +08:00
    为啥要下线官网,不是很明白。我感觉 layui 和 vue 之流又不是一类东西,并不冲突啊
    Macv1994
        9
    Macv1994  
    OP
       2021-09-26 11:18:45 +08:00
    @lancelock 官网运营需要费用吧
    Macv1994
        10
    Macv1994  
    OP
       2021-09-26 11:19:19 +08:00
    @Rwing 谢谢,就你这个我看懂了 /doge/
    belowfrog
        11
    belowfrog  
       2021-09-26 11:19:33 +08:00   ❤️ 1
    如果有个工具,可以把 python 3 转为 python 2 的语法,或者 java 16 转为 java 8 的语法,是不是就不用考虑平台,直接写最新的语言,跑在最老的平台。
    babel 就是用来干这个语言转换的,因为前端浏览器实在是版本太多,平台太多,如果有人能帮我处理代码到所有平台,那太爽了。
    js 语法这么处理了,那 css(样式表)是不是也能这样,或者我发明个其他语法,比如 scss,可以写 css 写不了的语法,转成 css 。对,比如 postcss,scss,less,stylus 都是干这些的。

    js,css 都可以了,图片可以统一方案么?因为图片也有这个需要,压缩,引入方式。

    这一系列转换就称为工程化,webpack 有很多插件可以做这些事。
    后来工程化概念扩大了,编译阶段能做的事都可以叫做工程化,比如 部署 ci,发布这些
    darknoll
        12
    darknoll  
       2021-09-26 11:20:51 +08:00
    主要就是指 webpack
    dqzcwxb
        13
    dqzcwxb  
       2021-09-26 11:21:16 +08:00
    eric96
        14
    eric96  
       2021-09-26 11:24:20 +08:00
    把在后端习以为常的的东西,搬到前端
    wanguorui123
        15
    wanguorui123  
       2021-09-26 12:47:31 +08:00
    如果前端 UI 交互越来越复杂,单纯的 JQuery 很难 Hold 住,这时候就需要系统性的对项目进行管理,这种系统性的管理就是前端工程化。
    前端工程化包括:可测试,可维护,可扩展。

    不需要复杂 UI 交互的项目大多数时候 JQuery 之内就能搞定,所以 layui 这类低门槛、快速开发的框架被不太会 JS 的程序员所青睐。
    而 Web 端现在想做复杂的东西了,比如:复杂的组件交互,以前那些框架就不能非常好的处理各种交互上的问题了,所以就需要工程化,需要有精通 JS 相关的人去开发功能。
    也就是说前端更像原生客户端程序的开发了,把原生客户端那套理论搬到 Web 端来实践。
    zxCoder
        16
    zxCoder  
       2021-09-26 13:41:47 +08:00
    就是 npm install npm run npm build
    robinlovemaggie
        17
    robinlovemaggie  
       2021-09-26 14:13:32 +08:00
    大概就是:开发 dev,测试 test,构建 build,部署 deploy 等环节互相解藕。
    xiongshengyao
        18
    xiongshengyao  
       2021-09-26 17:31:10 +08:00
    就是服务端工程化的那些东西,搬到前端
    ch2
        19
    ch2  
       2021-09-26 18:18:37 +08:00
    跟后端一样走同一套流程
    James369
        20
    James369  
       2021-09-26 20:12:17 +08:00   ❤️ 1
    唉,前端都出现有 30 年了吧,还在搞工程化,前端真是娱乐
    liuidetmks
        21
    liuidetmks  
       2021-09-26 20:58:09 +08:00 via iPhone
    采用 typescript 之类的 面向对象方法代码复用。
    采用 vue 使 ui 组件化,程序员专注于业务逻辑。

    通过脚本自动生成 html 页面


    反例就是现在一些活不过一个星期的活动页面,
    一个 html 引用一个 js,文件
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1031 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:57 · PVG 04:57 · LAX 12:57 · JFK 15:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.