构建工具的简述

注意 ： 本文的内容为纯文本，供各位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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

构建工具的作用

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

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

引出构建工具

构建工具 ： 
    可以让我们不用每次都关心我们的代码再浏览器中如何运行，
    我们只需要首次给构建工具提供一个配置文件，（这个配置文件不是必须的，会有默认的）
    有了这个集成的配置文件以后，我们就可以在下次需要更新额时候调用一次对应的命令就好了，
    如果我们再结合热更新，我们就更加不需要管任何的东西了。
    
    这就是构建工具去做的东西，它让我们不用关心生产的代码如何在浏览器中运行，只需要关心我们代码的开发即可。
1
2
3
4
5
6
7