vue3学习之旅--webpack5-babel整合sfc单文件vue组件

vue3一路的笔记
vue3学习之旅–邂逅vue3-了解认识Vue3
vue3学习之旅–邂逅vue3-了解认识Vue3(二)
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段
Vue3学习之旅–爱上Vue3–Vue3的Options-API
vue3学习之旅–vue的表单和开发模式–组件化开发初识
Vue3学习之旅–初识webpack–webpack打包js，css，less等文件以及兼容性处理
Vue3学习之旅–之webpack基础-进阶–webpack5?拿来吧你！

Babel和Vue的sfc

Babel

为什么需要babel？

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：

1. 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
2. 所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；

那么，Babel到底是什么呢？

Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的 JavaScript；

包括：语法转换、源代码转换等；

Babel命令行使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

如果我们希望在命令行尝试使用babel，需要安装如下库：

• @babel/core：babel的核心代码，必须安装；
• @babel/cli：可以让我们在命令行使用babel；

npm i @babel/core @babel/cli -D

使用babel来处理我们的源代码：

• src：是源文件的目录；也可以直接指定文件
• –out-dir：指定要输出的文件夹dist；

npx babel src --out-dir dict

插件的使用

比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

npm install @babel/plugin-transform-arrow-functions -D

npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

源代码：

const name = "毛毛";
const arr = [1,2,3];
const [a,b,c]= [...arr];
arr.forEach(item=>console.log(item));

目标代码：

const name = "毛毛";
const arr = [1, 2, 3];
const [a, b,