前端工程化详解

目录

    • 开发前
      • 1.使用脚手架工具
      • 2.使用编译工具
    • 开发中
      • 1.代码规范
      • 2.公共方法抽离
      • 3.公共组件抽离
      • 4.公共样式抽离
      • 5.icon 图片 国际化文案 常量等静态数据规划管理
      • 6.业务模块区分
      • 7.项目版本管理工具
      • 8.开发IDE以及代码检查工具
    • 开发结束
      • 1.单元测试
      • 2.项目打包
      • 3.项目发布

开发前

1.使用脚手架工具

根据选择的技术栈使用官方推荐的脚手架工具或者是自研脚手架工具。脚手架的作用:构建基本目录结构、本地调试、代码部署、热加载、单元测试。
例如:vue推荐的vue-lic、 vite 。

vue-cli是基于nodejs + webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash,或者bat。
原生的webpack配置项较多,vue-cli减轻了开发者心智负担,按照vue开发者的习惯整理并且构建了一套配置和规范。

Vite 是一个现代的前端构建工具,它在开发环境中利用浏览器原生的 ES 模块加载机制实现快速启动和热更新,而在生产环境打包时,默认 基于 Rollup进行构建。Rollup 是一个JavaScript 模块打包器,尤其擅长处理 ES 模块并产出优化过的静态资源。

2.使用编译工具

编译工具目前主要用的是两个,webpack 和rollup。

开发中

1.代码规范

常用的代码规范:

  1. 百度代码规范
  2. standard规范

2.公共方法抽离

3.公共组件抽离

4.公共样式抽离

5.icon 图片 国际化文案 常量等静态数据规划管理

6.业务模块区分

7.项目版本管理工具

目前项目版本管理工具主要有git 和 svn。以git为例。
规范git commit 提交记录。内容明确简洁的提交信息方便codereview,让管理者明确代码功能的变化原因。

规范提交:commitize是一个格式化commit message的工具。

提交检验: validate-commit-msg 用于检查项目的 Commit message 是否符合格式。

生成日志: conventional-changelog-cli 可以从git metadata生成变更日志。

8.开发IDE以及代码检查工具

使用统一的开发工具IDE,安装相同的插件,有利于代码风格统一。例如vscode,使用插件eslint。通过配置, 统一代码基本格式,以及生成格式错误提示。

开发结束

1.单元测试

推荐使用jest,Jest 是一个由 Facebook 开发的测试运行器,致力于提供一个“bettery-included”单元测试解决方案。你可以在其官方文档学习到更多 Jest 的知识。

2.项目打包

webpack和rollip都是打包工具。通过使用不同的配置项,达到多线程,快速打包。

3.项目发布

推荐使用 Gitlab CI/CD 自动化打包部署前端(vue)项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/3947.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

低代码信创开发核心技术(四)动态元数据系统设计

一、概述 在当今快速发展的信息技术领域,动态元数据系统扮演着至关重要的角色。它不仅能够提供数据的描述信息,还能动态地适应业务需求的变化,从而提高系统的灵活性和可扩展性。构建一个动态元数据系统意味着我们可以在不重启系统的情况下&a…

【机器学习】机器学习学习笔记 - 监督学习 - KNN线性回归岭回归 - 02

监督学习 KNN (k-nearest neighbors) KNN 是用 k 个最近邻的训练数据集来寻找未知对象分类的一种算法 from sklearn import neighbors# 分类 # 创建KNN分类器模型并进行训练 classifier neighbors.KNeighborsClassifier(num_neighbors, weightsdistance) classifier.fit(X,…

前端面试题合集

1.对前端监控的理解? 异常监控(监控前端页面的报错)> try / catch 、window.onerror、window.addEventListener、Vue.config.errorHandle JS 代码运行错误、语法错误等;AJAX 请求错误;静态资源加载错误&#xff1…

硬件21、接线端子XH2.54、2.54排针排母、2510接插件、PH2.0、町洋接线端子5.08、ISP接口JTAG插座

XH2.54端子的间距为2.54毫米,2.54排针排母的间距也是2.54mm,2510接插件也是2.54、而PH2.0端子的间距为2.0毫米,町洋接线端子插针间的距离是5.08mm,ISP接口JTAG插座针脚的间距一般也是2.54mm XH2.54 针脚间距为2.54mm 插头 接线…

如何使用 Internet Download Manager (IDM) 来加速和优化你的下载体验 IDM 6.41下载神器

在当今信息爆炸的时代,下载文件和媒体内容已成为我们日常生活的一部分。无论是工作学习还是娱乐休闲,我们都需要从互联网上下载各种资源。为了提高下载效率和确保文件完整性,选择一款优秀的下载管理软件至关重要。Internet Download Manager …

浅谈游戏机制

浅谈游戏机制 前言什么是游戏机制?机制组成机制类别结语 前言 最近在编写游戏开发文档的时候了解到游戏机制,第一次接触游戏机制的概念难免有些陌生,但感觉又跟常见,在网上查阅浏览了一些资料后了解到游戏机制还不止一个。 现在将…

vue echarts 柱状图 堆叠柱状图

echarts堆叠柱状图&#xff08;效果图在文章末尾&#xff09; 1、默认只显示 月度的 数据&#xff0c;手动点击 legend 季度的 数据才会显示&#xff1b; 2、监听左侧菜单栏的宽度变化&#xff0c;图表宽度自适应展示 <template><div><div id"barChart&q…

优雅实现uniapp返回上一页传参

在移动端应用中&#xff0c;表单设置组件往往作为独立的页面层级存在&#xff0c;以实现如时间选择等复杂功能。当用户在该组件页面内选定特定时间后&#xff0c;如何将这一选择结果高效、有序地传递回原页面&#xff0c;成为一个颇具挑战性的任务。尽管可以借助Vuex进行全局状…

构建数字化银行:现代化总架构探究

随着科技的迅速发展和用户需求的不断变化&#xff0c;传统银行业正迎来一场数字化转型的浪潮。在这个数字化时代&#xff0c;银行需要构建现代化的总架构&#xff0c;以适应快速变化的市场环境和客户需求。本文将深入探讨数字化银行的总架构设计理念、关键技术以及实践经验&…

【Python】使用 argparse 来加载yml文件的内容 - 2

继续上一节&#xff1a;【Python】YAML&#xff08;.yml&#xff09;文件简介以及python示例 - 1 使用 argparse 模块来读取 .yml 文件并不是直接由 argparse 完成的&#xff0c;但可以使用 argparse 来处理命令行参数&#xff0c;使得用户能够指定 .yml 配置文件的路径&#…

乘数而上,创邻科技入选2024数商典型应用场景“乘数榜”

4月18日&#xff0c;由浙江省科学技术协会指导的2024未来数商大会在杭州成功举办。本次大会以“场景突破 乘数而上”为主题&#xff0c;国际国内数商共聚未来科技城学术交流中心&#xff0c;聚焦数据要素市场的制度创新、数据治理、场景应用与生态构建等话题展开研讨。 大会现…

软件需求管理规程(Word原件2024)

软件开发人员及用户往往容易忽略信息沟通&#xff0c;这导致软件开发出来后不能很好地满足用户的需要&#xff0c;从而造成返工。而返工不仅在技术上给开发人员带来巨大的麻烦&#xff0c;造成人力、物力的浪费&#xff0c;而且软件的性能也深受影响。所以在软件项目开发周期的…

村集体建设用地,开发乡村旅游项目,土地如何审批?

以村集体建设用地,开发乡村旅游项目,土地如何审批? 乡村&#xff0c;作为承载乡村旅游产业的载体&#xff0c;在乡村振兴中扮演着非常重要的角色。 项目的落地&#xff0c;可靠的土地是必要的前提。集体建设用地如何审批&#xff1f;农转非又需要什么样的流程&#xff0c;具体…

StarRocks x Paimon 构建极速实时湖仓分析架构实践

Paimon 介绍 Apache Paimon 是新一代的湖格式&#xff0c;可以使用 Flink 和 Spark 构建实时 Lakehouse 架构&#xff0c;以进行流式处理和批处理操作。Paimon 创新性地使用 LSM&#xff08;日志结构合并树&#xff09;结构&#xff0c;将实时流式更新引入 Lakehouse 架构中。 …

什么ISP是住宅IP,和普通IP有什么区别?

ISP&#xff08;Internet Service Provider&#xff09;即互联网服务提供商&#xff0c;是向广大用户综合提供互联网接入业务、信息业务和增值业务的电信运营商。住宅IP&#xff0c;也称为家庭IP&#xff0c;是指由ISP分配给家庭或个人用户的IP地址。这些IP地址是真实的&#x…

Kotlin基础​​

数据类型 定义变量 var表示定义变量&#xff0c;可以自动推导变量类型&#xff0c;所以Int可以不用写。 定义常量 条件语句 if表达式可以返回值&#xff0c;该值一般写在if里的最后一行 类似switch的用法 区间 循环 a是标签&#xff0c;可以直接break到标签的位置&#xf…

【JVM】从i++到JVM栈帧

【JVM】从i到JVM栈帧 本篇博客将用两个代码例子&#xff0c;简单认识一下JVM与栈帧结构以及其作用 从i与i说起 先不急着看i和i&#xff0c;我们来看看JVM虚拟机&#xff08;请看VCR.JPG&#xff09; 我们初学JAVA的时候一定都听到过JAVA“跨平台”的特性&#xff0c;也就是…

18 JavaScript学习:错误

JavaScript错误 JavaScript错误通常指的是在编写JavaScript代码时发生的错误。这些错误可能是语法错误、运行时错误或逻辑错误。以下是对这些错误的一些常见分类和解释&#xff1a; 语法错误&#xff1a; 这类错误发生在代码编写阶段&#xff0c;通常是由于代码不符合JavaScrip…

Linux常用指令001

实验案例 创建一个和你名字同名的用户 在当前目录下创建名称为 1212的目录 进入到 1212 目录中 创建 a~d 目录 创建 1~10.txt 文件&#xff0c;如下 备份 创建一个和 1212 同一级目录的新目录 1313 将所有的文件和目录备份到 1313 目录中 在 1313目录中&#xff0c;查看…

小程序中如何快速给分类添加商品

​快速在分类下面上传商品&#xff0c;并且能够设置商品顺序&#xff0c;关系到运营效率的高低。下面就具体介绍如何快速在某个分类下面设置商品。 一、在商品管理处&#xff0c;查询某个分类下面的商品。 进入小程序管理员后台->商品管理&#xff0c;点击分类输入框&…