浏览器他只认识html, css, js
企业级项目里都可能会具备哪些功能
- typescript: 如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码
- React/Vue: 安装react-compiler / vue-complier, 将我们写的jsx文件或者.vue文件转换为render函数
- less/sass/postcss/component-style: 我们又需要安装less-loader, sass-loader等一系列编译工具
- 语法降级: babel ---> 将es的新语法转换旧版浏览器可以接受的语法
- 体积优化: uglifyjs ---> 将我们的代码进行压缩变成体积更小性能更高的文件
- .....
稍微改一点点东西, 非常麻烦
将App.tsx ---> tsc ---> App.jsx ---> React-complier ---> js文件
有一个东西能够帮你把tsc, react-compiler, less, babel, uglifyjs全部集成到一起
我们只需要关心我们写的代码就好了
我们写的代码一变化 ---> 有人帮我们自动去tsc, react-compiler, less, babel, uglifyjs全部挨个走一遍 ---> js
这个东西就叫做构建工具
打包: 将我们写的浏览器不认识的代码 交给构建工具进行编译处理的过程就叫做打包, 打包完成以后会给我们一个浏览器可以认识的文件
一个构建工具他到底承担了哪些脏活累活:
- 模块化开发支持: 支持直接从node_modules里引入代码 + 多种模块化支持
- 处理代码兼容性: 比如babel语法降级, less,ts 语法转换(不是构建工具做的, 构建工具将这些语法对应的处理工具集成进来自动化处理)
- 提高项目性能: 压缩文件, 代码分割
- 优化开发体验:
- 构建工具会帮你自动监听文件的变化, 当文件变化以后自动帮你调用对应的集成工具进行重新打包, 然后再浏览器重新运行（整个过程叫做热更新, hot replacement
- 开发服务器: 跨域的问题, 用react-cli create-react-element vue-cli 解决跨域的问题,
每次改一点 ---> 这个顺序还不能错
构建工具他让我们可以不用每次都关心我们的代码在浏览器如何运行, 我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的, 如果你不给他 他会有默认的帮你去处理), 有了这个集成的配置文件以后, 我们就可以在下次需要更新的时候调用一次对应的命令就好了, 如果我们再结合热更新, 我们就更加不需要管任何东西, 这就是构建工具去做的东西, 他让我们不用关心生产的代码也不用关心代码如何在浏览器运行, 只需要关心我们的开发怎么写的爽怎么写就好了
tsc xxx babel xx less xx
webpack
...
你如果听的有点懵 也没关系 集成的工作
市面上主流的构建工具有哪些:
- webpack
- vite
- parcel
- esbuild
- rollup
- grunt
- gulp