构建工具的简述

注意 : 本文的内容为纯文本,供各位coder学习了解。请各位coder耐心阅读。

背景

复制代码
企业级项目里可能会拥有哪些功能呢?有哪些特点呢?

1.typescript : 如果遇到ts的代码,需要使用tsc将ts编译为js代码
2.vue :  vue-complier ,将我们写的vue文件转化为render函数
3.less/sass/postcss/component-style : 安装 less-loader,sass-loader等一系列编译工具
4.语法降级 : babel : 将es的新语法转换为旧版浏览器可以接受的语法
5.体积优化 : uglifyjs : 将代码进行压缩,变成体积更小性能更高的文件
...

上述的内容如果一个一个的配置安装,将会较为麻烦;
如果有一个东西,能够把上面的东西全部集成到一起,
我们只需要关心我们自己写的代码,
当我们的代码发生变化的时候,这个东西能够帮我们把编译、语法降级、体积优化 等过程全部自动执行一遍,
直接生成最后的 我们需要的js文件,那该有多好啊。

那这个东西,就叫做【构建工具】。

构建工具的作用

复制代码
先了解一下什么是打包 :
 将我们写的浏览器不认识的代码,交给构建工具进行编译处理的过程就叫做打包。
 打包完成后会给我们一个浏览器可以认识的文件。

作用:
1.模块化开发的支持 : 支持直接从node_modules里引入代码 + 多种模块化支持
2.处理代码的兼容性 : 比如 Babel语法降级,ts语法转换等 (构建工具将这些语法对应的处理工具集成进来,自动处理)
3.提高项目性能 :打包过程中会执行 文件压缩、代码分割等
4.优化开发体验:
   4.1 自动监听文件的变化,当文件变化后,自动帮你重新打包,浏览器中重新运行(热更新,hot replacement)
   4.2 开发服务器,解决跨域问题等

引出构建工具

复制代码
构建工具 : 
    可以让我们不用每次都关心我们的代码再浏览器中如何运行,
    我们只需要首次给构建工具提供一个配置文件,(这个配置文件不是必须的,会有默认的)
    有了这个集成的配置文件以后,我们就可以在下次需要更新额时候调用一次对应的命令就好了,
    如果我们再结合热更新,我们就更加不需要管任何的东西了。
    
    这就是构建工具去做的东西,它让我们不用关心生产的代码如何在浏览器中运行,只需要关心我们代码的开发即可。
相关推荐
JustHappy几秒前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
chenqi10 分钟前
WebGPU和WebLLM:在浏览器中解锁端侧大模型的未来
前端·人工智能
Lingxing11 分钟前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
玖玖passion12 分钟前
leader:请你用Protobuf进行数据交互🥲
前端
Linruoxin15 分钟前
为什么给 body 设置背景会直接铺满整个视口?
前端·css
Jenlybein18 分钟前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js
codelang2 小时前
Cline + MCP 开发实战
前端·后端
好_快3 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读