关于前端:构建工具承担了哪些工作

46次阅读

共计 1150 个字符,预计需要花费 3 分钟才能阅读完成。

前提:浏览器只意识html、css、js

在理论我的项目中,个别都会具备如下性能:

1、TypeScript

2、Vue/React

3、less/scss

4、语法降级:babel

5、体积优化:UglifyJS

…..

这些文件浏览器是无奈间接辨认的,须要通过编译或转换成浏览器意识的样子

1、ts:如果遇到 ts 文件须要应用 tscts转换成 js 代码

2、vue/react:装置 vue-complier / react-complier,我的项目中的.vue 文件或者 react 我的项目中的 jsx 文件转换成 render 函数

3、lessscss 须要装置 less-loaderscss-loader等编译工具

4、语法降级:babees 的新语法转换成旧版浏览器能够承受的语法

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、优化开发体验:

  • 构建工具会帮你主动监听文件的变动,当文件变动当前主动帮你调用对应的集成工具进行从新打包,而后在浏览器从新运行(热更新)
  • 开发服务器:跨域问题,应用代理来解决跨域问题。

打包:将浏览器不意识的代码交给构建工具进行编译解决的过程叫做打包,打包实现后会返回给浏览器一个可意识的文件

构建工具能够让咱们不必每次关怀代码在浏览器如何运行,只须要给构建工具提供一个配置文件(该配置文件不是必须的,构建工具默认帮你配置好了),有了这个集成的配置文件当前,咱们就能够在下次须要更新的时候调用一次对应的命令即可,再联合热更新,构建工具会帮咱们主动解决这些编译和转换问题,开发者只须要关注代码自身的编写即可。

正文完
 0