谈谈你对前端工程化的理解，它包含哪些方面

news2025/3/18 10:02:53

大白话谈谈你对前端工程化的理解，它包含哪些方面

前端工程化其实就是把前端开发变得更规范、更高效、更易于维护的一套方法和流程。就好比你盖房子，不能随便瞎盖，得有设计图纸、施工标准、分工合作，前端工程化也是类似的道理。

  1. 项目初始化：

    • 当我们开始一个新的前端项目时，首先要做的就是初始化项目。
    • 比如使用 npm init 命令来创建 package.json 文件（这是项目的配置文件，记录了项目的各种信息，比如项目名称、版本、依赖的库等等）。
    npm init -y  // -y 参数表示默认同意所有选项，快速生成 package.json 文件

  2. 依赖管理：

    • 前端项目通常会依赖很多第三方库，比如 jQuery、Vue、React 等等。
    • 使用 npm 或 yarn 来管理这些依赖。比如安装 Vue：
    npm install vue  // 使用 npm 安装 Vue 库，安装的库会保存在 node_modules 文件夹中

    yarn add vue  // 使用 yarn 安装 Vue 库，和 npm 类似，yarn 也是一个包管理工具

  3. 代码规范：

    • 为了让团队成员的代码风格统一，我们需要制定代码规范。
    • 可以使用 ESLint 工具来检查代码是否符合规范。
    • 首先安装 ESLint：
    npm install eslint --save-dev  // --save-dev 表示安装的是开发环境依赖，不会发布到生产环境
    • 然后创建 .eslintrc 配置文件（在这个文件里定义代码规范的规则，比如缩进、分号使用、变量命名等等）。
    {
  "env": {
    "browser": true,  // 表示代码运行在浏览器环境
    "es6": true  // 支持 ES6 语法
  },
  "extends": "eslint:recommended",  // 继承 eslint 的推荐规则
  "parserOptions": {
    "ecmaVersion": 2018,  // 指定 ECMAScript 版本
    "sourceType": "module"  // 代码类型为模块
  },
  "rules": {
    "semi": ["error", "always"],  // 要求语句末尾必须有分号
    "quotes": ["error", "double"]  // 要求使用双引号
  }
}

  4. 构建工具：

    • 前端项目通常需要进行构建，比如压缩代码、合并文件、转换 ES6 语法到 ES5 等等。
    • 常用的构建工具是 Webpack。
    • 首先安装 Webpack 和 Webpack-cli（命令行工具）：
    npm install webpack webpack-cli --save-dev  // 安装 Webpack 及其命令行工具
    • 然后创建 webpack.config.js 配置文件（在这里配置 Webpack 如何处理各种文件，比如 JavaScript、CSS、图片等等）。
    const path = require('path');  // 引入 Node.js 的 path 模块，用于处理文件路径

module.exports = {
  entry: './src/index.js',  // 入口文件，项目的起点
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出文件的目录，使用 path.resolve 方法生成绝对路径
    filename: 'bundle.js'  // 输出的文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/,  // 匹配所有的.js 文件
        exclude: /node_modules/,  // 排除 node_modules 文件夹
        use: {
          loader: 'babel-loader',  // 使用 babel-loader 处理 JavaScript 文件
          options: {
            presets: ['@babel/preset-env']  // 使用 @babel/preset-env 预设，将 ES6+ 语法转换为 ES5 语法
          }
        }
      },
      {
        test: /\.css$/,  // 匹配所有的.css 文件
        use: ['style-loader', 'css-loader']  // 依次使用 style-loader 和 css-loader 处理 CSS 文件
      }
    ]
  }
};

  5. 开发流程管理：

    • 包括开发、测试、上线等环节。
    • 比如使用 Git 进行版本控制，记录代码的修改历史，方便团队协作和回滚到之前的版本。
    • 首先初始化 Git 仓库：
    git init  // 在项目根目录初始化一个 Git 仓库
    • 然后添加文件到暂存区：
    git add.  // 将项目中所有文件添加到暂存区，. 表示当前目录下所有文件
    • 提交文件到本地仓库：
    git commit -m "Initial commit"  // 提交文件，并添加提交信息 "Initial commit"
    • 可以将代码推送到远程仓库，比如 GitHub：
    git remote add origin <repository-url>  // 添加远程仓库，<repository-url> 是远程仓库的地址
git push -u origin master  // 将本地的 master 分支推送到远程仓库的 origin 地址，并设置 upstream 关联

  6. 性能优化：

    • 优化前端项目的性能，比如减少文件大小、优化图片、懒加载等。
    • 对于图片优化，可以使用工具压缩图片大小。
    • 懒加载可以使用一些库来实现，比如 vue-lazyload（如果是 Vue 项目）：
    • 安装 vue-lazyload：
    npm install vue-lazyload  // 安装 vue-lazyload 库
    • 在 Vue 项目中使用：
    import Vue from 'vue';
import App from './App.vue';
import VueLazyload from 'vue-lazyload';  // 引入 vue-lazyload 库

Vue.use(VueLazyload);  // 使用 vue-lazyload 插件

new Vue({
  render: h => h(App)
}).$mount('#app');
    • 这样在 Vue 项目中，图片就会在需要显示的时候才加载，提高页面加载速度。

总之，前端工程化涵盖了项目从开始到上线的各个方面，通过这些方法和工具，可以让前端开发更加高效、规范和可维护。

前端工程化中的代码规范和自动化测试

代码规范

在前端工程化里，代码规范是保障代码质量与团队协作效率的关键。它能让代码更易读、易维护，还能减少潜在的错误。下面从几个方面详细解释：

1. 风格规范

风格规范着重于代码的格式，像缩进、空格、换行等。例如在 JavaScript 里，常见的缩进方式是使用两个或四个空格。

// 四个空格缩进示例
function greet(name) {
    return 'Hello, ' + name;
}

// 两个空格缩进示例
function sayHi(name) {
  return 'Hi, ' + name;
}
2. 命名规范

命名规范要求使用有意义的名称为变量、函数、类等命名。这样做能让代码的意图更清晰。

// 好的命名示例
const userEmail = 'example@example.com';
function calculateTotalPrice(quantity, price) {
    return quantity * price;
}

// 不好的命名示例
const a = 'example@example.com';
function calc(x, y) {
    return x * y;
}
3. 语法规范

语法规范规定了代码必须遵循的语法规则。例如在 JavaScript 中，要使用严格模式，避免使用一些不安全或不推荐的语法。

// 使用严格模式
'use strict';

// 不推荐使用 with 语句
// with (Math) {
//     let result = cos(0);
// }

// 推荐使用明确的引用
let result = Math.cos(0);
4. 注释规范

注释规范定义了代码注释的方式和内容。好的注释可以帮助其他开发者理解代码的功能和实现思路。

// 函数注释示例
/**
 * 计算两个数的和
 * @param {number} a - 第一个数
 * @param {number} b - 第二个数
 * @returns {number} 两个数的和
 */
function add(a, b) {
    return a + b;
}
5. 工具支持

为了确保代码符合规范，通常会使用一些工具。例如 ESLint 可以检查 JavaScript 代码是否符合指定的规则。

# 安装 ESLint
npm install eslint --save-dev

# 初始化 ESLint 配置
npx eslint --init

自动化测试

自动化测试是前端工程化中确保代码质量的重要手段。它可以在代码修改后自动运行一系列测试用例，快速发现潜在的问题。下面介绍几种常见的自动化测试类型：

1. 单元测试

单元测试主要针对代码中的最小可测试单元，比如一个函数或一个组件。常见的 JavaScript 单元测试框架有 Jest 和 Mocha。

// 示例函数
function sum(a, b) {
    return a + b;
}

// 使用 Jest 进行单元测试
test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});
2. 集成测试

集成测试用于测试多个模块或组件之间的交互是否正常。例如在一个前端应用中，测试不同页面之间的跳转和数据传递。

// 模拟一个简单的页面跳转函数
function navigateToPage(page) {
    // 这里可以实现具体的跳转逻辑
    return `Navigating to ${page}`;
}

// 集成测试示例
test('navigate to home page', () => {
    expect(navigateToPage('home')).toBe('Navigating to home');
});
3. 端到端测试

端到端测试模拟用户在浏览器中的真实操作，测试整个应用的流程是否正常。常见的端到端测试工具是 Puppeteer 和 Cypress。

// 使用 Puppeteer 进行端到端测试示例
const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    const title = await page.title();
    console.log('Page title:', title);
    await browser.close();
})();
4. 持续集成

持续集成是指在代码发生变化时，自动运行测试用例，并将结果反馈给开发者。常见的持续集成工具是 Jenkins 和 Travis CI。通过持续集成，可以及时发现代码中的问题，保证代码的稳定性。

综上所述，代码规范和自动化测试在前端工程化中起着至关重要的作用，它们能提高代码质量、降低维护成本，使项目的开发更加高效和可靠。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【AVRCP】Notification PDUs 深入解析与应用

【AVRCP】Notification PDUs 深入解析与应用

目录 一、Notification PDUs 概述 二、GetPlayStatus：同步查询播放状态 2.1 命令功能与应用场景 2.2 请求格式（CT → TG） 2.3 响应格式（TG → CT） 2.4 注意事项 2.5 协议实现示例（伪代码） 三、RegisterNotification：异步事件订阅 3.1 命令概述 3.2 命令格式 …
阅读更多...
MATLAB 控制系统设计与仿真 - 27

MATLAB 控制系统设计与仿真 - 27

状态空间的标准型 传递函数和状态空间可以相互转换&#xff0c;接下来会举例如何有传递函数转成状态空间标准型。 对角标准型 当 G(s)可以写成&#xff1a; 即&#xff1a; 根据上图可知&#xff1a; 约当标准型 当 G(s)可以写成&#xff1a; 即&#xff1a; 根据上图…
阅读更多...
linux 命令 cp

linux 命令 cp

cp 是 Linux 中用于复制文件和目录的命令&#xff0c;基本功能是将源文件或目录复制到目标位置 基本语法 cp [选项] 源文件 目标文件 cp [选项] 源文件1 源文件2 ... 目标目录 常用选项 选项说明-i交互模式&#xff08;覆盖前询问确认&#xff09;-r 或 -R递归复制目录&#…
阅读更多...
蓝桥杯高频考点——进制转换

蓝桥杯高频考点——进制转换

进制转换 二进制转十进制代码演示 十六进制转十进制代码演示 十进制转K进制代码演示 任意进制之间的转换代码演示 二进制转十进制 代码演示 // 定义函数 calc&#xff0c;用于将字符转换为对应的数值 int calc(char c) {// 若字符 c 大于等于 9&#xff08;注&#xff1a;此处…
阅读更多...
【算法百题】专题七_分治快排_专题八_分治归并

【算法百题】专题七_分治快排_专题八_分治归并

文章目录 前言分治快排题&#xff1a;043. [颜⾊分类&#xff08;medium&#xff09;](https://leetcode.cn/problems/sort-colors/description/)分析 044. [快速排序&#xff08;medium&#xff09;](https://leetcode.cn/problems/sort-an-array/description/)分析 045. [快速…
阅读更多...
使用OBS进行webRTC推流参考

使用OBS进行webRTC推流参考

参考腾讯云官方文档&#xff1a; 云直播 OBS WebRTC 推流_腾讯云 说明非常详细&#xff0c;分为通过WHIP和OBS插件的形式进行推流。 注意&#xff1a;通过OBS插件的形式进行推流需要使用较低的版本&#xff0c;文档里有说明&#xff0c;需要仔细阅读。
阅读更多...
（链表）面试题 02.07. 链表相交

（链表）面试题 02.07. 链表相交

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&#xff…
阅读更多...
Python----数据可视化（Pyecharts三：绘图二：涟漪散点图，K线图，漏斗图，雷达图，词云图，地图，柱状图折线图组合，时间线轮廓图）

Python----数据可视化（Pyecharts三：绘图二：涟漪散点图，K线图，漏斗图，雷达图，词云图，地图，柱状图折线图组合，时间线轮廓图）

1、涟漪特效散点图 from pyecharts.globals import SymbolType from pyecharts.charts import EffectScatter from pyecharts.faker import Faker from pyecharts import options as opts from pyecharts.globals import ThemeType # 绘制图表 es (EffectScatter(init_optsop…
阅读更多...
IP风险度自检，互联网的安全“指南针”

IP风险度自检，互联网的安全“指南针”

IP地址就像我们的网络“身份证”&#xff0c;而IP风险度则是衡量这个“身份证”安全性的重要指标。它关乎着我们的隐私保护、账号安全以及网络体验&#xff0c;今天就让我们一起深入了解一下IP风险度。 什么是IP风险度 IP风险度是指一个IP地址可能暴露用户真实身份或被网络平台…
阅读更多...
数据结构与算法-图论-拓扑排序

数据结构与算法-图论-拓扑排序

前置芝士 概念 拓扑排序&#xff08;Topological Sorting&#xff09;是对有向无环图&#xff08;DAG&#xff0c;Directed Acyclic Graph&#xff09;的顶点进行排序的一种算法。它将图中的所有顶点排成一个线性序列&#xff0c;使得对于图中的任意一条有向边 (u, v)&#x…
阅读更多...
Gan网络公式了解

Gan网络公式了解

Gan网络 生成器和判别器是亦敌亦友的关系 对于生成模型&#xff0c;损失函数很难定义->所以我们可以将生成模型的输出交给判别模型进行处理&#xff0c;来分辨好坏。 生成器的损失是通过判别器的输出来计算的&#xff0c;而判别器的输出是一个概率值&#xff0c;我们可以通过…
阅读更多...
解决linux mysql命令 bash: mysql: command not found 的方法

解决linux mysql命令 bash: mysql: command not found 的方法

首先得知道mysql命令或mysqladmin命令的完整路径 比如mysql的路径是&#xff1a; /usr/local/mysql/bin/mysql&#xff0c;我们则可以这样执行命令&#xff1a; ln -s /usr/local/mysql/bin/mysql /usr/bin © 著作权归作者所有,转载或内容合作请联系作者 喜欢的朋友记得点…
阅读更多...
微服务存在的问题及解决方案

微服务存在的问题及解决方案

微服务存在的问题及解决方案 1. 存在问题 1.1 接口拖慢 因为一个接口在并发时&#xff0c;正好执行时长又比较长&#xff0c;那么当前这个接口占用过多的 Tomcat 连接&#xff0c;导致其他接口无法即时获取到 Tomcat 连接来完成请求&#xff0c;导致接口拖慢&#xff0c;甚至…
阅读更多...
【css酷炫效果】纯CSS实现立体纸张折叠动效

【css酷炫效果】纯CSS实现立体纸张折叠动效

【css酷炫效果】纯CSS实现悬浮阴影扩散交互 缘创作背景html结构css样式完整代码基础版进阶版(3d 悬浮效果) 效果图 通过CSS box-shadow与transition属性实现悬浮阴影扩散交互&#xff0c;为元素添加细腻的悬浮反馈。 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;htt…
阅读更多...
案例5_1:单位数码管显示0

案例5_1:单位数码管显示0

文章目录 文章介绍效果图仿真图5_1放置单位数码管 代码5_1.c 文章介绍 效果图 仿真图5_1 复制案例1_2的仿真图&#xff0c;在此基础上修改 注意&#xff1a;栅格大小需要缩小 放置单位数码管 代码5_1.c #include <reg52.h>#define uchar unsigned char #define uint un…
阅读更多...
Linux centos7误删/boot拯救方法

Linux centos7误删/boot拯救方法

1.进入救援模式 插入CentOS 7安装光盘&#xff0c;重启系统。在开机时按BIOS设置对应的按键&#xff08;通常是F2等&#xff09;&#xff0c;将启动顺序调整为CD - ROM优先。 系统从光盘启动后&#xff0c;选择“Troubleshooting”&#xff0c;然后选择“Rescue a CentOS s…
阅读更多...
操作系统八股文整理(一)

操作系统八股文整理(一)

操作系统八股文整理 一、进程和线程的区别二、进程与线程的切换过程一、进程切换进程切换的步骤&#xff1a; 二、线程切换线程切换的步骤&#xff1a; 三、进程切换与线程切换的对比四、上下文切换的优化 三、系统调用一、系统调用的触发二、从用户空间切换到内核空间三、执行…
阅读更多...
20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量

20250317笔记本电脑在ubuntu22.04下使用acpi命令查看电池电量 2025/3/17 18:05 百度&#xff1a;ubuntu查看电池电量 百度为您找到以下结果 ubuntu查看电池电量 在Ubuntu操作系统中&#xff0c;查看电池电量通常可以通过命令行或者图形界面来完成。下面是一些常见的方法&…
阅读更多...
蓝桥杯备考----模拟算法 phone number

蓝桥杯备考----模拟算法 phone number

嗯。这道题可以在两个和三个数字加-&#xff0c;我们只要随便输出一个奏行 那么&#xff01;我们规范一下&#xff0c;我们尽可能的只在两个数字之间加&#xff0c;但是如果一共奇数个的话&#xff0c;我们就让最后三个成一组&#xff0c;也就是说&#xff0c;我们用的是个小贪…
阅读更多...
【数据分享】2000—2024年我国省市县三级逐月归一化植被指数（NDVI）数据（Shp/Excel格式）

【数据分享】2000—2024年我国省市县三级逐月归一化植被指数（NDVI）数据（Shp/Excel格式）

之前我们分享过2000—2024年逐月归一化植被指数&#xff08;NDVI&#xff09;栅格数据&#xff08;可查看之前的文章获悉详情&#xff09;&#xff0c;该数据来源于NASA定期发布的MOD13A3数据集&#xff01;很多小伙伴拿到数据后反馈栅格数据不太方便使用&#xff0c;问我们能不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023