「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战」
前面我们讲了 webpack
对 css
文件、图片、字体等内容的处理以及插件的使用,这些东西虽然没有涉及到 Vue
,但在 Vue
的脚手架中这些东西都是比较重要的(因为在 Vue
项目中,你不可能没有 css
、图片等内容,也不可能不用插件对诸如 HTML
文件进行打包、对一些文件进行复制)。本节要讲的是 Webpack
对其它文件(包括 .js
文件、.vue
文件)的转化,这就涉及到两个东西:Babel
和某个和 Vue
相关的 loader
。下面我们就先来学习一下 Babel
。
我们首先做下准备工作:
-
删除
webpack_插件
目录下的build
和node_modules
文件夹; -
拷贝一份
webpack_插件
目录,并重命名为webpack_babel
; -
打开
VS Code
的终端,切换目录到webpack_babel
下,运行npm install
安装当前项目(webpack_babel
)所需依赖,安装完成后,项目目录如下:
1. Babel
的认识和介绍
-
为什么需要
babel
?- 事实上,在开发中我们很少直接去接触
babel
,但是babel
对于前端开发来说,目前是不可缺少的一部分。 - 因为开发中如果我们想要使用
ES6+
的语法,想要使用TypeScript
,开发React
项目(jsx
转换为JavaScript
时就是通过Babel
来完成的)、Vue
项目、Angular
项目(这些框架的脚手架中都封装了Babel
),它们都是离不开Babel
的。 - 所以,学习
Babel
对于我们理解代码从编写到线上的转变过程至关重要。
- 事实上,在开发中我们很少直接去接触
-
那么,
Babel
到底是什么?-
Babel
是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+
代码转换为向后兼容版本的JavaScript
; -
包括:语法转换、源代码转换等;
比如对一个数组中的每个数字元素加
1
,我们可能比较喜欢通过ES6
中箭头函数的语法去编写代码:[1, 2, 3].map((n) => n + 1);
使用箭头函数相比于普通的函数,看起来非常直观,写起来也更方便,可以提高我们的开发效率,但是,诸如箭头函数等
ES6+
语法,有些浏览器由于版本低可能识别(解析)不了,到时候在这些浏览器上跑这些ES6+
语法编写的代码就会报错(因为并不是所有的JS
引擎都可以正常地解析ES6
语法的,有些JS
引擎可能是不能解析的,那么运行的时候就会报错)。而ES5
的语法已经出来很久了,所以基本上所有浏览器都是支持ES5
语法的。因此,我们需要将编写的ES6+
代码转换成ES5
语法的代码:[1, 2, 3].map(function(n) { return n + 1; });
这个转换过程我们肯定不会手动来完成,这时,我们就可以使用
Babel
来帮我们转换了。
-
关于 Babel
的更多内容,可以查阅 Babel
的官网:babeljs.io/
那么,如何来使用 Babel
呢?下面,我们先来讲下如何在命令行中使用 Babel
,之后再来讲如何在 Webpack
中使用 Babel
。