- 综合排序
- 最热优先
- 最新优先
- 来自专栏Vue开发社区
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
前言 Vue 3 正式版已经发布有一段时间了，随着 Vite 脚手架注定成为下一代前端工具链，许多用户都想基于 Vite 来构建 Vue 项目，如果想基于 Vite 构建 Vue 3 项目，社区模板完全满足您的需求 TypeScript 语言的用户不是很友好，因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。 + Vue3 + Vue Router + Pinia + Axios + Less 的前端项目开发环境搭建完毕。 通过此链接 ElanYoung.github.io/vite-vue-js…[66] 即可访问本项目 文章总结 本文从技术选项到架构搭建、从代码规范约束到提交信息规范约束，一步一步带领大家如何从一个最简单的前端项目骨架到规范的前端工程化环境 ，基本涵盖前端项目开发的整个流程，特别适合刚接触前端工程化的同学学习。
4.6K10编辑于 2023-02-27 - 来自专栏闲花手札
前端工程化
小白眼中的前端开发 vs 实际的前端开发 小白眼中的前端开发 会写 HTML + CSS + JavaScript 就会前端开发 需要美化页面样式，就拽一个 bootstrap 过来 需要操作 DOM UI 结构、样式、行为） 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理） 自动化（自动化构建、自动部署、自动化测试） 什么是前端工程化 前端工程化指的是：在 企业级的前端项目开发 中，把前端开发所需的 工具、技术、流程、经验等进行规范化、 标准化 企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。 好处：前端开发自成体系，有一套标准的开发方案和流程。 前端工程化的解决方案 早期的前端工程化解决方案 grunt（ https://www.gruntjs.net/ ） gulp（ https://www.gulpjs.com.cn/ ） 目前主流的前端工程化解决方案
46620发布于 2021-08-24 - 来自专栏马涛涛的专栏
前端工程化
工程化 所谓前段工程自动化就是：由于前端分裂，有人写css代码，有人写scss，有人写es5，有人写es6，那么就需要翻译工具（命令行工具）翻译成ie或其他所有浏览器能运行的代码版本。 ? 什么是前段工程化，就是要从写html，css，js到写自动化，模块化的html，css，js，并且考虑性能优化。 自动化 举个例子： 使用命令行工具实现代码自动化转变。 工程化中自动化的过程 例如我们有这样的工程目录。 ? 那么我们需要开一个sass监听scss文件的修改，并转换为css，然后放到dist里。 所谓前段工程自动化就是：由于前端分裂，有人写css代码，有人写scss，有人写es5，有人写es6，那么就需要翻译工具（命令行工具）翻译成ie或其他所有浏览器能运行的代码版本。 3、在”.gitignore” 文件里输入你要忽略的文件夹及其文件就可以了。
1.5K30发布于 2018-10-31 - 来自专栏希里安
前端工程化浅谈
但现在的前端开发，早就进入了工程化开发的时代，已经存在有各种现代化的框架，编译工具以及预处理器等等。 下面就传统和工程化的前端开发优劣介绍下： 传统开发： 没有采用工程化工具和流程的情况下进行开发，通常需要开发者手动管理文件、依赖和构建过程。 2、维护难，没有统一的代码风格，团队协作难 3、难扩展，缺少模块化和组件化 工程化： 优势就是传统化所存在的问题的解决 1、组件化，效率高 2、代码质量提升 3、自动化工具和流程 4、按需导入导出 等等 劣势： 1、入门稍慢 2、灵活性不如传统开发 3、复杂度较高 这只是简单的介绍，其实有更多的知识点在这里面，更多的是因为工程化开发是现代前端开发的必备项了。 为什么说要掌握主流框架是必备，因为前端框架就是前端工程化开发中不可或缺的一部分。框架肯定是利用了现有行业中优势技术，也能避免大家不断重复造轮子，降低上手难度，提升开发效率。
51830编辑于 2023-10-30 - 来自专栏前端架构与工程
浅析前端工程化
什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。 前端的工程化问题与传统的软件工程虽然有所不同，但是面临的问题是一样的。我们首先回顾一下传统的软件开发流程模型： ? 上图中的运行和维护并不是串行关系，也并非绝对的并行关系。 具体到前端工程化，面临的问题是如何提高编码->测试->维护阶段的生产效率。 前端工程化面临的问题 要解决前端工程化的问题，可以从两个角度入手：开发和部署。 从开发角度，要解决的问题包括： 提高开发生产效率； 降低维护难度。 笔者收集了一些资料可供参考： Web应用的组件化开发； 前端组件化开发实践; 大规模的前端组件化与模块化。 3.
1.4K91发布于 2018-01-30 - 来自专栏TagBug
前端工程化 - 笔记
主要是前端工程化理论 # 前端工程化理论 ---- # 定义 前端工程化 = 软件工程 + 前端 是⼀种通过规范化、模块化、⾃动化等⼿段，提⾼前端项⽬在研发、运维阶段的效率、质量。
37020编辑于 2023-03-16 - 来自专栏code秘密花园
谈前端工程化
开篇语：抖音前端团队通过几年的实践，积累了一些前端研发中的经验与理念，计划通过比较轻松、简洁的语言记录下来分享给大家，希望对大家有帮助，有理解不妥的不吝赐教。 作为前端架构的一部分，工程化是个永恒的话题，我们之所以老生常谈这个事情，核心原因在于浏览器这个环境所支持的三种语言没有在语言层面提供统一的模块化支持，这使得大家都在考虑如何添加这些模块特性，更好的支持好开发 它们包含了 HTML、CSS、JS，我们通过工程化的手段来达到组件的工程化支持。现在的浏览器已经逐步支持 Web Component 来逐步磨平这些个不足。 所以我们的工程化体系里面有了打包(package)这个名词，这个名词几乎是我们工程化体系中无法抹去的一个话题，也同样是性能优化体系里面一个非常重要的手段。 同样在前端的组件化体系中也同样有这样的问题。 解决依赖是个非常麻烦的事情，一般我们会在构建编译的阶段去搞定这个事情，如果静态编译想搞定这个事情需要有一套可识别的标志。
63420发布于 2021-10-19 - 来自专栏前端架构与工程
前端工程化-构建
所谓纯前端构建，就是说不涉及后端模板的构建，经过构建之后的前端代码可以直接上线。 我们在浅析前端工程化一文中提到的便是前后端协作的构建模式，也是本文将要讨论的方向。 下面我们细化资源管理的每个关键点，共同探讨一下前端工程中构建环节的工作内容和面临的问题。 1. 3. 依赖管理 依赖管理之所以方案不唯一是因为每个项目可能会采用不同的客户端模块加载方案（AMD/CMD/CommonJS）。构建平台本身不应该面向某一种方案，而应该是可配置的。 但是前端构建工具必须谨慎处理模板引擎的语法，以免造成“误伤”。后端模板引擎多种多样，前端构建工具很难做到百分百覆盖。 模板交由后端构建的优点是可以对每种模板引擎有针对性的处理，而且是很工程化的构建方式；缺点是需要额外书写寻址function，但是这个缺点相对于优点来说微不足道。
1.4K60发布于 2018-01-30 - 来自专栏编程技术分享
前端工程化建设
随着浏览器和前端技术的发展，现在的前端项目越来越大、业务也越来越复杂，前端工程化已经成为一件势在必行的事情。 前端工程化其实就是软件工程在前端方向上的实施，不过篇幅有限，本文只讲解其中的几个点。 团队规范 如果前端团队只有一两个人，规范的作用微乎其微；但团队人数超过一定数量时，规范的作用就显现出来了。 百度前端代码规范 Airbnb 翻译版 如何编写高质量代码 UI 规范 UI 规范需要前端、UI、产品沟通，互相商量，最后制定下来，建议使用统一的 UI 组件库。 推荐阅读： 高性能网站建设指南 高性能网站建设进阶指南 Web性能权威指南 测试 测试是前端工程化建设必不可少的一部分，它的作用就是找出 bug，越早发现 bug，所需要付出的成本就越低。 监控是前端工程化建设中的最后一环，当项目上线后，通过监控系统可以了解到项目在生产环境中的运行情况，开发团队可以根据监控报告对项目做进一步的调整和优化。
97720发布于 2020-09-28 - 来自专栏全栈加加
前端工程化概述，带你全面深刻了解前端工程化思想
1 前言 大家好，今天我来和大家一起来了解前端工程化的知识，如有疑问和错误，欢迎指正，一起交流探讨哈！ 2 什么是前端工程化？ 3 前端为什么需要工程化？ 随者前端的快速发展，现在的前端”太大，太广“，”复杂“，"大前端"，"微前端"等词的出现，前端已经不再止于前端了 更有甚者，可以说前端不再是后端的附属品了，可以说，前端已经愈加成熟 4 前端工程化要解决哪些问题 4.4 提高项目的开发质量 在以上情况的实现下，项目的开发质量必然得到保证 5 前端工程化发展的四个阶段 我个人看来前端工程化包括如下阶段: 第一阶段:库/框架选型 前端的库和框架大致有（jquery 6 前端工程化的深究 前端工程化是对模块化，组件化，规范化，自动化的高度概括和总结凝练，是一个更高层次的思想，也就是说实现前端工程化应该从模块化，组件化，规范化，自动化四个方面着手 前端模块化 在工程化的基础上
70540发布于 2021-02-23 - 来自专栏前端皮小蛋
AST 与前端工程化实战AST 与前端工程化实战
本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。 直播分享视频地址：AST 与前端工程化实战 一、初识 AST 1、demo-1 第一次看见 AST 这个概念的时候还是在《你不知道的 JavaScript》一书中看到的。 三、前端工程化 现在，咱来聊聊前端工程化。 前段工程化可以分成四个块来说，分别为 模块化：将一个文件拆分成多个相互依赖的文件，最后进行统一的打包和加载，这样能够很好的保证高效的多人协作。 而这些前端自动化其中的一部分，前端自动化还包含了持续集成、自动化测试等方方面面。 而，处于其中任何一个块都属于前端工程化。 AST 又能为前端工程化做些什么？ 如果觉得文章不错，那么希望你能动动你的小手，帮忙点个赞，谢谢了 ~ 前端交流群：731175396
1.8K40发布于 2020-03-03 - 来自专栏Cellinlab's Blog
前端工程化 - webpack 基础
默认配置文件 webpack.config.js，可以通过 webpack --config 指定配置文件
48020编辑于 2023-05-17 - 来自专栏QQ音乐前端团队专栏
前端工程化-Feflow实践
前言 前端工程化是指将开发阶段的代码转变成生产环境的代码的一系列步骤。主要包括构建，分支管理，自动化测试，部署等步骤。 本文将介绍团队在前端工程化的实践，主要采用feflow作为前端工作流，并结合Git工作流，将前端开发流程中的各个步骤进行流程化，从而提高开发效率。 Feflow 简介 Feflow是一个用于提升开发效率的前端工作流和规范工具，托管在Github上：Tencent/feflow，目前start 941，官网：https://feflowjs.com/ 命令设计 Feflow 将命令划分为3类，分别是： 普通命令：Feflow 原生实现的命令，也就是内置命令 开发套件命令：项目维度的命令，不同的项目类型下命令或多或少存在差异，由开发套件提供。 例如，运行 feflow commit 1 2 3 时，args 就是 { _: [1, 2, 3] }。 插件调试 截至目前，你已经完成了一个插件。你可能迫不及待想试试。别急，让我们一步一步来。
1.9K20发布于 2021-03-22 - 来自专栏前端迷
前端工程化实践总结 |
蓝字关注，回复“加群”加入前端技术群 与大家一起成长 | 导语 本文主要介绍在前端工程化的一些探索和实践，结合移动端的基础库重构和UI组件库开发这两个项目详细介绍工程化方案 。 浅谈前端工程化 前端工程化是一个非常广泛的议题，包含的技术和解决方案也是非常丰富的。一个前端工程的生命周期可以大致划分为这四个过程： ? 自动化 自动化是前端工程化的一个重要组成部分，可以减少重复的工作，提高工作效率。 我们的项目构建现状 介绍完了前端工程化的一些概念和技术后，下面结合我们团队中的具体项目具体分析。 1.现状分析 这是目前团队移动端基础库的项目结构：主要有9个模块，其中3个UI组件依赖框架。 ? 参考文献 前端模块化详解(完整版) 我们是怎么进行前端工程化的 我对前端工程化的理解 浅谈 CSS 预处理器（一）：为什么要使用预处理器？
5K41发布于 2019-09-12 - 来自专栏学习/读书笔记
《前端工程化》-- 2. 脚手架3. 构建
使用工具替代人工操作能够避免人为失误引起的低级错误，同时结合整体前端工程化方案，快速生成功能模块配置、自动安装依赖等，降低了时间成本。 2.2.2 局限于本地的执行环境 前端工程化的3个阶段：本地工具链、云管理平台和持续集成。三者最明显的外在差异在于，对各个功能模块执行环境的划分。 不论前端工程化是简单的本地工具链，还是集大成的持续集成阶段，脚手架的执行环境始终局限于本地，这给脚手架工具带来一个必须解决的问题：操作系统兼容性。 整体流程如图： 3. 构建 3.1 构建功能解决的问题 构建，或者叫作编译，在前端工程体系中的角色是将源代码转化为宿主浏览器可执行的代码，其核心是资源的管理。 3.4.2 模块化与工程化 模块化是属于架构层面的概念，前端工程化与模块化的关系类似于组装车间与零件。
1.6K20编辑于 2022-04-07 - 来自专栏岳泽以博客
前端工程化与webpack
前端工程化 小白眼中的前端开发： 会写 HTML + CSS + JavaScript 就会前端开发 需要美化页面样式，就拽一个 bootstrap 过来 需要操作 DOM 或发起 Ajax 请求，再拽一个 行为） 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理） 自动化（自动化构建、自动部署、自动化测试 前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术 最终落实到细节上，就是实现前端的“4 个现代化”： 模块化、组件化、规范化、自动化 前端工程化的好处 前端工程化的好处主要体现在如下两方面： ① 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面 ② 最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本 前端工程化的解决方案 早期的前端工程化解决方案： grunt（ https://www.gruntjs.net/ ） ://zh.parceljs.org/ ） webpack的基本使用 什么是webpack 概念：webpack是前端项目工程化的具体解决方案。
91120编辑于 2022-10-26 - 来自专栏编程
前端工程化衡量准则
小编说：前端工程化这个概念在近两年被广泛地提及和讨论，究其原因，是前端工程师所负责的客户端功能逻辑在不断复杂化。本文介绍了前端工程化的衡量准则以及3个阶段。 具体的衡量标准就是我们常说的3个字：快、准、稳。 1．从开发角度衡量工程化主要体现在“快”。 3．从部署角度衡量工程化主要体现在“稳”。 部署是一个完整迭代周期的最终阶段。经历了漫长的开发和测试，团队中的所有成员都希望自己的产品能够第一时间完美无误地出现在用户面前。 前端工程化的3个阶段 1．本地工具链——工程化不等同于工具化 你也许会有这样的念头：所谓的前端工程化不就是把一系列工具进行整合吗？工程化的核心难道就是工具化？ 3．持续集成——前端工程化的目标是融入整体 即使进化到管理平台形态，前端工程化方案所解决问题的本质仍然只是将前端工程师与服务器端工程师的工作解耦。
1.3K50发布于 2018-01-26 - 来自专栏Cellinlab's Blog
前端工程化 - npm 基础
, // 只要 HTML 文件有变动，就重新执行构建 "watch:html": "watch 'npm run build:html' assets/html", // 部署到 Amazon S3 "deploy:prod": "s3-cli sync . /dist/ s3://example-com/prod-site/", // 构建 favicon "build:favicon": "node scripts/favicon.js", # 语义化版本规范 semver 约定一个包的版本号必须包含 3 个数字，格式必须为 MAJOR.MINOR.PATCH, 意为 主版本号.小版本号.修订版本号 MAJOR 对应大的版本号迭代，做了不兼容旧版的修改时要更新
78420编辑于 2023-05-17 - 来自专栏娜姐聊前端
前端工程化脑图
前端工程化是一套流程和规范，可以指导快速迭代和更合理的在前后台分离环境下进行合作，开发。 前端工程化.png
84220发布于 2020-09-22 - 来自专栏前端那些趣事
前端工程化那些事
什么是前端工程化？本质上就是将前端开发流程，标准化、规范化、工具化、自动化、简单化。 3.4 总结 如果团队项目规模较小，那么推荐使用数据拦截型（mockjs）就足够，变更方便，但如果项目规模大,多人协作，且需求接口变更快，建议使用mock接口管理平台 4.前端规范 随着前端工程化的日益成熟 3.Object.freeze 方法来冻结一个不会有任何改变的对象，减少组件初始化的时间 4.每个组件 export default {} 内的方法顺序一致，方便查找对应的方法。 这个时候就需要用到 Git Hook vue-cli3x的官方配置支持看这里 点我。 而对于服务端渲染的前端应用，部署相对而言环节多一些，还需要管理进程、监控服务是否正常等等，就涉及到其他工具的使用，下面是前端工程化项目部署涉及到的几个主流工具如下?
1.8K30发布于 2020-07-03
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号