前端工程化-什么是构建工具

了解构建工具之前,我们首先要知道的是浏览器只认识html、css、js,而我们开发时用的vue,react框架都只是为了方便我们开发而使用的工具

使用构建工具的原因

vue或react的企业级项目里都会具备这些功能:

1.使用typescript语言:如果我们遇到ts文件我们需要使用tsc命令将typescript代码转换为js代码

2.使用react/vue:安装react-complier/vue-complier,将我们写的jsx文件或者.vue文件转换为render函数将他们转换为html、js、css

3.使用less/sass/postcss/component-style:我们又需要安装less-loader,sass-loader等一系列编译工具将他们转换为css

4.语法降级:babel-->将es5以上的新语法转换为低版本浏览器可以接受的js语法。

5.体积优化:uglifyjs ---> 将我们的代码进行压缩变成体积更小性能更高的文件

6.······

这些所有的功能在每次修改项目时都必须全部执行一遍

例如在React项目修改了App.tsx文件的内容,在编译运行到浏览器上之前,我们需要将该文件做如下的处理:

App.tsx(使用了TypeScript语言)--> 使用tsc(处理TypeScript) --> App.jsx(先转变为JavaScript语言) === App.jsx(React文件)--> React-complier(处理.jsx文件) -->js文件(直到拿到js文件)

如果没有一款帮助我们自动处理这些重复性工作的工具,是不是我们开发起来也非常麻烦呢,于是这些工具就诞生了

这个工具能够帮你把tsc,vue-complier,react-complier,less-loader,babel,uglifyjs等全部集成在一起。这样我们只需要关心我们写的代码就好了!!!一旦我们修改了某文件代码--->工具就会帮自动去调用tsc, react-compiler, less, babel, uglifyjs等其他工具并执行 --->最终直接生成浏览器能够渲染执行的html、css、 js文件。

而这个工具就叫做构建工具

生成浏览器能够渲染执行的html、css、 js文件的过程就叫做打包.

构建工具主要干了些什么

1.模块化开发支持:支持直接从node_modules里引入代码+多种模块化支持

import vue from 'vue'; //浏览器并不认识这样的文件引入方式,它只认识绝对路径和相对路径的引入方式。所以这里构建工具就需要对他进行处理。将'vue'转变为'./vue'等等。

2.处理代码兼容性:比如babel语法降级,less、ts语法转换(不是构建工具做的,构建工具将这些语法对应的处理工具集成进来自动化处理)

3.提高代码性能:压缩文件,代码分割

4.优化开发体验:

构建工具会帮你自动监听文件的变化,当文件变化以后会自动帮你调用对应的集成工具进行重新打包,然后再浏览器重新运行(整个过程叫做热更新,hot replacement)

开发服务器:跨域的问题,用react-cli,create-react-element,vue-cli解决跨域的问题

每次改一点 ---> 这个顺序还不能错

构建工具它让我们可以不用每次都关心我们的代码再浏览器如何运行,我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的,如果你不给他,他会有默认的帮你去处理),有了这个集成的配置文件以后,我们就可以在下次需要更新的时候调用一次对应的命令就好了,如果我们再结合热更新, 我们就更加不需要管任何东西, 这就是构建工具去做的东西, 他让我们不用关心生产的代码也不用关心代码如何在浏览器运行, 只需要关心我们的开发怎么写的爽怎么写就好了

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

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

相关文章

JNPF开发平台凭什么火?

一、关于低代码 JNPF平台在提供无代码(可视化建模)和低代码(高度可扩展的集成工具以支持跨功能团队协同工作)开发工具上是独一无二的。支持简单、快速地构建及不断改进Web端应用程序,可为整个应用程序的生命周期提供全…

科锐学习笔记-DEBUG命令使用解析及范例大全

启动 Debug,它是可用于测试和调试 MS-DOS 可执行文件的程序。 Debug [[drive:][path] filename [parameters]] 参数 [drive:][path] filename 指定要测试的可执行文件的位置和名称。 parameters 指定要测试的可执行文件所需要的任何命令行信息。 说明 使用 D…

Ubuntu18 Opencv3.4.12 viz 3D显示安装、编译、移植

Opencv3.*主模块默认包括两个3D库 calib3d用于相机校准和三维重建 ,viz用于三维图像显示,其中viz是cmake选配。 参考: https://docs.opencv.org/3.4.12/index.html 下载linux版本的源码 sources。 查看cmake apt list --installed | grep cmake 查看vtk apt list --ins…

车载以太网-传输层-UDP

文章目录 UDP协议UDP报文格式UDP报文示例UDP协议测试UDP协议 UDP(User Datagram Protocol)是一种无连接的传输层协议,它不保证数据传输的可靠性,但是具有传输速度快的优点。UDP协议主要用于那些对数据传输速度要求较高,但对数据传输的可靠性要求不高的应用场景,如音视频…

《白帽子讲web安全》

第十四章 PHP安全 文件包含漏洞是“代码注入”的一种。“代码注入”这种攻击,其原理就是注入一段用户能控制的脚本或代码,并让服务器端执行。“代码注入”的典型代表就是文件包含(File Inclusion)。文件包含可能会出现在JSP、PHP…

DeepStream--测试TrafficCamNet检测模型

模型地址:https://catalog.ngc.nvidia.com/orgs/nvidia/teams/tao/models/trafficcamnet/version 目前模型是nvidia的加密格式etlt。 nvinfer的配置 [property] gpu-id0 net-scale-factor0.0039215697906911373 tlt-model-keytlt_encode tlt-encoded-modeltraffic…

oracle重新安装集群软件后挂盘启动数据库

现有情况是恢复灾备环境的oracle集群备库,灾备端一直和主端做的数据同步,但是之前主端的三块OCR磁盘出现过故障,更换过磁盘,但是灾备端虽然一直做数据同步,但是只同步了DATA和FRA两个磁盘组。 如今需要使用灾备端来做测…

react等效memo的方法

视频教程 前端技术|Dan博客|在你写memo()之前_哔哩哔哩_bilibili 把与ExpensiveTree的无关的dom做成一个组件 第二种情况,color在ExpensiveTree组件的父级dom 创建一个组件,将state的color和input写上,而ExpensiveTr…

hook io异常注入

文中code https://gitee.com/bbjg001/darcy_common/tree/master/io_hook 需求引入 最近工作需要,需要验证一下我们的服务在硬盘故障下的鲁棒性。 从同事大佬哪里了解到hook技术,可以通过LD_PRELOAD这个环境变量拦截依赖库的调用链,将对标准…

微信小程序记住密码,让登录解放双手

密码是用户最重要的数据,也是系统最需要保护的数据,我们在登录的时候需要用账号密码请求登录接口,如果用户勾选记住密码,那么下一次登录时,我们需要将账号密码回填到输入框,用户可以直接登录系统。我们分别…

Thinkphp5报错:htmlentities() expects parameter 1 to be string, array given

注意注意: 本文对应 ThinkPHP5.1 版本。前言 - 出现问题的原因 为避免出现 XSS 安全问题,Thinkphp5.1 默认变量输出都会使用 htmlentities 方法进行转义输出。 如果不想被转义输出,模板渲染时,需要在变量后面加上 raw方法&#xf…

综述--知识蒸馏

知识蒸馏(Knowledge Distillation)作为一种类似迁移学习的方法,最早是由Hinton等人在2015年提出[1],在近年来得到了广泛的关注和研究。它通过将一个复杂的模型的知识转移到一个简化的模型中,以实现在模型大小和计算资源…

每天一道算法题(九)——寻找字符串中所有字母异位词的子串

文章目录 前言1、问题2、示例3、解决方法(1)方法1——双指针 总结 前言 提示: 1、问题 给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字…

推荐一个windows上传linux服务器/linux服务器的docker镜像的工具,摆脱docker cp,以及解决常见问题。

Lrzsz,又称为lrz和lsz,是一个用于在Unix、Linux、macOS等操作系统上进行串行文件传输的工具。它支持基于X/Y/ZModem协议的文件传输,能够通过串口或者Telnet/SSH等网络连接进行文件传输。Lrzsz具有传输速度快、可靠性高、易于使用等特点&#…

详解ES6的Promise

ES6(ECMAScript 6)是JavaScript的一种标准,也被称为ES2015。它是在2015年发布的第六个ECMAScript标准版本,引入了许多新的语法和特性来增强JavaScript的功能和可读性。 文章目录 一、创建promise 二、处理Promise 三.Promise链…

OpenCV入门9——目标识别(车辆统计)

文章目录 图像轮廓查找轮廓绘制轮廓轮廓的面积与周长多边形逼近与凸包外接矩形项目总览【车辆统计】视频加载【车辆统计】去背景【车辆统计】形态学处理【车辆统计】逻辑处理【车辆统计】显示信息【车辆统计】 图像轮廓 查找轮廓 # -*- coding: utf-8 -*- import cv2 import n…

return关键字

return 是编程语言中的一个关键字,用于结束当前函数或方法的执行,并返回一个值(如果函数有返回值的话)。return 的作用是将程序的控制权从当前的函数或方法返回给调用方,并且返回一个指定的值。 在函数中的作用&#…

vue3的api使用

vue官网链接 API 全览图 createApp() // 内敛根组建import { createApp } from vueconst app createApp({})// 导入根组建import App from ./App.vueconst app createApp(App)app.mount() import { createApp } from vue const app createApp() const vm app.mount(#app…