Vue3和TypeScript学习笔记coderwhyDay08之Babel、Vue打包

---

Babel

为什么需要Babel?
开发中使用ES6语法，想要使用TypeScript、开发React项目都离不开Babel

Babel是什么呢？
一个工具链。主要用于旧的浏览器或环境将es6代码转换为向后兼容版本。包括：语法转换、源代码转换等

---

Babel基本使用（了解）

babel本身可作为一个独立的工具（像之前的postcss一样），不和webpack等构建工具一起使用

我们现在写了一段代码，使用箭头函数和const。需要babel进行转换。

const message = "Hello World";
const names = ["abc", "cba", "nba"];

names.forEach(item => console.log(item));

在命令行使用babel，需要先安装两个库：
@babel/core：babel核心代码，必装
@babel/cli ：可让我们在命令行使用babel
npm install @babel/cli @babel/core -D
npx babel src --out-dir dist

对上面代码进行转换，需要箭头函数转换相关的插件（/plugin-transform-arrow-functions）和const转成var的插件（plugin-transform-block-scoping）
npm install @babel/plugin-transform-arrow-functions -D
npm install @babel/plugin-transform-block-scoping -D

npx命令使用这两个插件
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

---

Babel的预设（了解）

我们可以发现，像前面一个个进行设置是很麻烦的，我们可以使用预设
1.安装@babel/preset-env预设
npm install @babel/preset-env
2.执行如下命令
npx babel src --out-dir dist --presets=@babel/preset-env

---

Babel底层原理

---

babel-loader

我们之前用webpack打包es6代码时，可以发现es6语法并没有转换成es5语法。我们需要借助babel。

1.安装
npm install babel-loader @babel-core
2.指定插件

use: {
    loader: "babel-loader"
    plugins: [
     "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-block-scoping",
    ]
}

babel预设
如果我们一个个安装插件，麻烦。我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并传给babel
常见的预设有3个：env、react、TypeScript

1.安装preset-env
npm install @babel/preset-env
2.配置

	{
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env"
            ]
          }
        }
      }

---

Babel的配置文件

将babel的配置信息单独抽到独立文件。
有两种编写方式：
babel.config.json(或.js、.cjs、.mjs）文件：可直接做monorepos项目子包，推荐
.babelrc.json（或.babelrc、.js、.cjs、.mjs）文件：早期较多配置方式，但对应配置monorepos项目麻烦

babel.config.js

module.exports = {
  presets: [
    "@babel/preset-env"
  ]
}

webpack.config.js

 	 {
        test: /\.js$/,
        loader: "babel-loader"
      }

---

Vue源码打包

Vue打包不同版本会有不同的解析
我们可以查看项目node_modules/vue下面vue打包的很多不同版本。不同的版本会对我们的代码做不同的解析

运行时+编译器vs运行时

在vue开发中，我们有3中方式编写DOM
1.template模板方式
2.render函数方式，使用h函数来编写渲染的内容
3.通过.vue文件中的template来编写

它们的模板分别是如何处理的呢？
方式2中，h函数直接返回一个虚拟节点，即Vnode节点
方式和3的template都需要特定的代码来对其进行解析
方式1中的template需要通过源码中的一部分代码进行解析
方式3.vue文件中可通过在vue-loader对其进行解析

Vue在让我们选择版本时分运行时+编译器vs运行时
runtime+compiler:支持template 更完整
runtime：不支持template 较小

---

VSCode对SFC文件的支持

真实开发中我们都是通过SFC方式写代码
VSCode对SFC文件的支持
插件一：Vetur
插件二：Volar 官方推荐

编写.vue文件
webpack怎么打包vue呢？
安装vue-loader
npm install vue-loader@next -D（@next安装vue3）
npm install @vue/compiler-sfc -D
配置对应Vue的插件
new VueLoaderPlugin()

const { VueLoaderPlugin } = require('vue-loader/dist/index');
 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ],
  },
plugins: [
    new VueLoaderPlugin()
]

---

• 以上仅是简单入门了解，更多内容看官网配置
  babel官网文档
• 以上笔记参考coderwhy老师的Vue3和TypeScript。
  老师讲课链接：课程链接