构建工具承担了哪些工作?
前提:浏览器只认识html、css、js
在实际项目中,一般都会具备如下功能:
1、TypeScript
2、Vue/React
3、less/scss
4、语法降级:babel
5、体积优化:UglifyJS
.....
这些文件浏览器是无法直接识别的,需要通过编译或转换成浏览器认识的样子
1、ts
:如果遇到ts
文件需要使用tsc
将ts
转换成js
代码
2、vue/react
:安装vue-complier / react-complier
,项目中的.vue
文件或者react
项目中的jsx
文件转换成render
函数
3、less
或scss
需要安装less-loader
或scss-loader
等编译工具
4、语法降级:babe
将es
的新语法转换成旧版浏览器可以接受的语法
5、体积优化:UglifyJS
将代码进行压缩变成体积更小性能更高的文件
这些东西都需要我们手动运行,每次我们对文件进行修改保存后想要预览最新的效果,都需要重新将上面的文件全都手运行编译一遍,非常麻烦。这个时候就需要一个构建工具帮我们承担这些工作,将tec、vue-complier、less、babel、UglifyJS
全都集成到一起,构建工具替我们完成,只要代码一发生变化,构建工具就会帮我们自动去编译或转换这些文件,开发者只需要关注代码即可。
构建工具承担了哪些工作?
1、直接从node_modules
里引入代码、多种模块化支持(esmodule、commonjs
)
终端 npm i loadsh
,在html
文件内直接引入loadsh
会报错,因为浏览器无法识别node_modules
上面的是esmodules
,使用commonjs
多模块直接引入也是无法识别的
我们可以通过构建工具来进行依赖预构建,从而解决该问题。
vite依赖预构建 (点击直达👈)
2、处理代码兼容性:babel
语法降级、less/ts
语法转换,需要注意的是,代码的兼容性不是构建工具完成的,而是构建工具将这些语法对应的处理工具集成来自动处理)
3、提高项目性能:压缩文件,代码分割
4、优化开发体验:
- 构建工具会帮你自动监听文件的变化,当文件变化以后自动帮你调用对应的集成工具进行重新打包,然后在浏览器重新运行(热更新)
- 开发服务器:跨域问题,使用代理来解决跨域问题。
打包:将浏览器不认识的代码交给构建工具进行编译处理的过程叫做打包,打包完成后会返回给浏览器一个可认识的文件
构建工具可以让我们不用每次关心代码在浏览器如何运行,只需要给构建工具提供一个配置文件(该配置文件不是必须的,构建工具默认帮你配置好了),有了这个集成的配置文件以后,我们就可以在下次需要更新的时候调用一次对应的命令即可,再结合热更新,构建工具会帮我们自动处理这些编译和转换问题,开发者只需要关注代码本身的编写即可。