什么是前端构建工具?比如(Vue2的webpack,Vue3的Vite)

① 浏览器理解的基础与项目功能

首先要明白:浏览器它只认识html, css, js。

在企业级项目中,可能会具备以下功能:

  1. TypeScript:如果遇到ts文件,我们需要使用tsc将TypeScript代码转换为js代码。
  2. React/Vue:安装react-compiler / vue-complier,将我们写的jsx文件或者.vue文件转换为render函数。
  3. Less/PostCSS/Component-Style:我们又需要安装less-loader, sass-loader等一系列编译工具。
  4. 语法降级:Babel将ES的新语法转换为旧版浏览器可以接受的语法。
  5. 体积优化:UglifyJS将我们的代码进行压缩,变成体积更小、性能更高的文件。

② 前因后果:自动化处理的必要性

因为稍微改一点点东西,非常麻烦!

将App.tsx -> tsc -> App.jsx -> React-complier -> js文件。

但是有一个东西能够帮你把tsc, react-compiler, less, babel, uglifyjs全部集成到一起,我们只需要关心我们写的代码就好了。

我们写的代码变化 -> 有人帮我们自动去tsc, react-compiler, less, babel, uglifyjs全部挨个走一遍 -> js。

这个东西就叫做 前端构建工具

③ 前端构建工具的工作原理

前端构建工具的工作包括:

  • 打包:将我们写的浏览器不认识的代码交给构建工具进行编译处理的过程就叫做打包。打包完成后会给我们一个浏览器可以认识的文件。
  • 构建工具承担的工作
    1. 模块化开发支持:支持直接从node_modules里引入代码 + 多种模块化支持。
    2. 处理代码兼容性 :比如babel语法降级,less, ts语法转换(不是构建工具做的,构建工具将这些语法对应的处理工具集成进来,自动化处理)。
    3. 提高项目性能 :压缩文件,代码分割
    4. 优化开发体验
      • 构建工具会帮你自动监听文件的变化,当文件变化后自动帮你调用对应的集成工具进行重新打包,然后在浏览器重新运行(整个过程叫做热更新, hot replacement)。
      • 开发服务器:跨域的问题,用react-cli create-react-element vue-cli·解决跨域的问题。

④ 构建工具总结

构建工具它让我们可以不用每次都关心我们的代码在浏览器如何运行,我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的,如果你不给他,他会有默认的帮你去处理)。

有了这个集成的配置文件以后,我们就可以在下次需要更新的时候调用一次对应的命令就好了,如果我们再结合热更新,我们就更加不需要管任何东西,这就是构建工具去做的东西。

构建工具它让我们不用关心生产的代码,也不用去关心代码如何在浏览器运行,只需要关心我们的开发怎么写的爽怎么写就好了。

相关推荐
yinuo38 分钟前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip2 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈3 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~3 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技013 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio4 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫5 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@5 小时前
前端发送请求时,参数的传递格式
前端
L李什么李5 小时前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务5 小时前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel