webPack、vite
webPack
webPack用来干什么
-
什么是webPack
webPack可以看作是模块打包机:它做的事情时,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言(Scss、TypeScript等),并将其打包为合适的格式以供浏览器使用。
-
为什么要使用webPack
如今很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出很多好的实践方法
-
模块化,让我们可以把复杂的程序细化为小的文件
-
类似于TypeScript这种在javaScript基础上扩展的开发语言:是我们能够实现目前版本的javascript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别
-
scss、less等css预处理器
这些改进确实大大提高了我们的开发效率,但是利用他们进行开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又非常繁琐,这就是webPack类的工具的出现的需求。
- webPack和Grunt以及Gulp相比有什么特性
- 其实webPack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端开发流程的工具,而webPack是一种模块化的解决方案,不过webPack的优点使得webPack可以替代Gulp/Grunt类的工具。
- Gulp和Grunt的工作方式是:在一个配置文件中,指明对某些文件进行类似编译、组合、压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
- webPack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),webPack将从这个文件开始找到你的项目的所有依赖文件该,使用loaders处理它们,最后打包为一个浏览器可识别的javaScript文件。
- webPack优点:模块化
在webPack看来一切都是模块!这就是他不可不说的优点,包括你的javaScript代码,也包括css和fonts以及图片等等,只有通过合适的loaders,它们都可以被当做模块进行处理。
babel常用到的工具包
- babel:ES6转义的核心包
- babel-cli:用于在终端使用babel,用命令行转码
- babel-core:如果某些代码小调用babel的API进行转码,就要使用’babel-core’模块
- babel-loader:执行转义的核心包
- babel-plugin-react-transform:代替react-hot-loader的插件
- babel-preset-es2015:闲杂被babel-preset-env取代了,被babel未来不会过时的(future-proof)解决方案
- babel-preset-react:转义react的jsx语法
- babel-preset-stage-0: 'stage-0’包含 ‘stage-1’, 'stage-2’以及 'stage-3’的所有功能