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

news/2024/2/21 3:07:14

了解构建工具之前,我们首先要知道的是浏览器只认识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解决跨域的问题

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

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


https://www.xjx100.cn/news/3092591.html

相关文章

反序列化漏洞介绍

反序列化漏洞 序列化和反序列化本身不存在漏洞,之所以会有反序列化漏洞,是因为开发者在编写时,加入了一些恶意的代码 PHP反序列化漏洞是一种安全漏洞,它允许攻击者利用未经验证的用户输入来执行恶意代码。这种漏洞通常出现在PHP…

功能测试进阶建议,学习思路讲解

1. 深入了解测试理论: 了解测试的原理、方法和最佳实践,包括黑盒测试、白盒测试、灰盒测试等。可以阅读相关的书籍或参加在线课程。 2. 学习相关测试工具: 掌握常用的测试工具,如缺陷发现工具、性能测试工具、安全测试工具等。可以…

NUCLEO-L552ZE SWD外部接口定义

如果使用ST-LINK调试器对外部MCU编程需要将CN4上的跳线拔下。

动态神经网络时间序列预测

大家好,我是带我去滑雪! 神经网络投照是否存在反锁与记忆可以分为静态神经网络与动态神经网络。动态神经网络是指神经网络带有反做与记忆功能,无论是局部反馈还是全局反锁。通过反馈与记忆,神经网络能将前一时刻的数据保留&#x…

Python Opencv实践 - 二维码和条形码识别

使用pyzbar模块来识别二维码和条形码。ZBar是一个开源软件,用来从图像中读取条形码,支持多种编码,比如EAN-13/UPC-A、UPC-E、EAN-8、代码128、代码39、交错2/5以及二维码。 pyzbar是python封装ZBar的模块,我们用它来做条形码和二维码的识别。…

Java 1.0 到 Java 17历程

Java 自 1995 年发布以来,经历了多个版本的更新,每个版本都引入了新的特性和改进。以下是从 Java 1.0 到 Java 17(截至我所掌握的最新信息)的主要新特性概览: Java 1.0 (1996) 初始版本,包含了Java的基础…

第一次参加算法比赛是什么感受?

大家好,我是怒码少年小码。 冬日暖阳,好日常在。今天中午在食堂干饭的时候,我的手机📱收到了一条收货信息。 阿?什么玩意儿?我又买啥了? 个败家玩意,我都准备好叨叨我自己&#x…

Vue项目 配置项设置

一、项目运行时浏览器自动打开 找到package.json文件 找到"sctipts"配置项 在"serve"配置项最后加上--open "scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build&quo…