前端工程化构建工具是什么（前端工程化构建工具是什么意思）



了解构建工具之前，我们首先要知道的是浏览器只认识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文件的内容，在编译运行到浏览器上之前，我们需要将该文件做如下的处理：

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

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

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

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

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

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

3.提高代码性能：压缩文件，代码分割

4.优化开发体验：

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

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

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/47536.html