Vue 项目之 Webpack 对其它文件的转化(1)

163 阅读3分钟

「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战

前面我们讲了 webpackcss 文件、图片、字体等内容的处理以及插件的使用,这些东西虽然没有涉及到 Vue,但在 Vue 的脚手架中这些东西都是比较重要的(因为在 Vue 项目中,你不可能没有 css、图片等内容,也不可能不用插件对诸如 HTML 文件进行打包、对一些文件进行复制)。本节要讲的是 Webpack 对其它文件(包括 .js 文件、.vue 文件)的转化,这就涉及到两个东西:Babel 和某个和 Vue 相关的 loader。下面我们就先来学习一下 Babel

我们首先做下准备工作:

  1. 删除 webpack_插件 目录下的 buildnode_modules 文件夹;

  2. 拷贝一份 webpack_插件 目录,并重命名为 webpack_babel

  3. 打开 VS Code 的终端,切换目录到 webpack_babel 下,运行 npm install 安装当前项目(webpack_babel)所需依赖,安装完成后,项目目录如下:

    image-20211118070806496

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