Babel

最新推荐文章于 2024-04-17 00:19:53 发布

浮游本尊

最新推荐文章于 2024-04-17 00:19:53 发布

阅读量338

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_45658814/article/details/125316766

版权

为什么需要babel？

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

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

那么，Babel到底是什么呢？

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

Babel命令行使用

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

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

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

使用babel来处理我们的源代码：npm install @babel/cli @babel/core -D

src：是源文件的目录；
–out-dir：指定要输出的文件夹dist；
npx babel src --out-dir dist

插件的使用

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

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

查看转换后的结果：我们会发现 const 并没有转成 var

这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
我们需要使用 plugin-transform-block-scoping 来完成这样的功能；
npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

Babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

后面我们再具体来讲预设代表的含义；

安装@babel/preset-env预设：npm install @babel/preset-env -D

执行如下命令：npx babel src --out-dir dist --presets=@babel/preset-env

Babel的底层原理

babel是如何做到将我们的**一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）**的呢？

从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
就是编译器，事实上我们可以将babel看成就是一个编译器。
Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；

Babel也拥有编译器的工作流程：

解析阶段（Parsing）
转换阶段（Transformation）
生成阶段（Code Generation）

https://github.com/jamiebuilds/the-super-tiny-compiler

Babel编译器执行原理

Babel的执行阶段 :
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4G3wZBRl-1655363966058)(https://oss-emcsprod-public.modb.pro/image/editor/20220419-17487919-e757-4131-84b8-83215b379040.png)]

当然，这只是一个简化版的编译器工具流程，在每个阶段又会有自己具体的工作：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AMK8h2ek-1655363966059)(https://oss-emcsprod-public.modb.pro/image/editor/20220419-588a75b3-161e-43ff-82ee-e621d7a29b74.png)]

babel-loader

在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。

那么我们就需要去安装相关的依赖：

如果之前已经安装了@babel/core，那么这里不需要再次安装；npm install babel-loader -D

我们可以设置一个规则，在加载js文件时，使用我们的babel：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader"
      }
    ],
  }

指定使用的插件

{
      test: /\.js$/,
      use: {
          loader: "babel-loader",
          options: {
            plugins: [
              "@babel/plugin-transform-arrow-functions",
              "@babel/plugin-transform-block-scoping",
            ]
          }
     }
}

babel-preset

如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。

比如常见的预设有三个：

env
react
TypeScript

安装preset-env：npm install @babel/preset-env -D

{
      test: /\.js$/,
      use: {
          loader: "babel-loader",
          options: {
            plugins: [
              "@babel/plugin-transform-arrow-functions",
              "@babel/plugin-transform-block-scoping",
            ]
            presets: [
              "@babel/preset-env"
            ]
          }
      }
}

Babel的配置文件

像之前一样，我们可以将babel的配置信息放到一个独立的文件中，babel给我们提供了两种配置文件的编写：

babel.config.json（或者.js，.cjs，.mjs）文件；
.babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件；

它们两个有什么区别呢？目前很多的项目都采用了多包管理的方式（babel本身、element-plus、umi等）；

.babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；
babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐；

Vue源码的打包

我们主要是学习Vue的，那么我们应该包含Vue相关的代码：

<template>
  <h2>我是Vue渲染出来的</h2>
  <h2>{{title}}</h2>
  <hello-world></hello-world>
</template>

<script>
  import HelloWorld from './HelloWorld.vue';

  export default {
    components: {
      HelloWorld
    },
    data() {
      return {
        title: "Hello World",
        message: "哈哈哈"
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  h2 {
    color: red;
  }
</style>

界面上是没有效果的：并且我们查看运行的控制台，会发现如下的警告信息；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-534oZrBu-1655363966059)(https://oss-emcsprod-public.modb.pro/image/editor/20220419-a1c32014-991d-40a3-85a9-c727a4aeb658.png)]

Vue打包后不同版本解析

vue(.runtime).global(.prod).js：

通过浏览器中的 script src="…"直接使用；
我们之前通过CDN引入和下载的Vue版本就是这个版本；
会暴露一个全局的Vue来使用；

vue(.runtime).esm-browser(.prod).js：

用于通过原生 ES 模块导入使用 (在浏览器中通过

vue(.runtime).esm-bundler.js：

用于 webpack，rollup 和 parcel 等构建工具；
构建工具中默认是vue.runtime.esm-bundler.js；
如果我们需要解析模板template，那么需要手动指定vue.esm-bundler.js；

vue.cjs(.prod).js：

服务器端渲染使用；
通过require()在Node.js中使用；

运行时+编译器 vs 仅运行时

在Vue的开发过程中我们有三种方式来编写DOM元素：

方式一：template模板的方式（之前经常使用的方式）；
方式二：render函数的方式，使用h函数来编写渲染的内容；
方式三：通过.vue文件中的template来编写模板；

它们的模板分别是如何处理的呢？

方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点；
方式一和方式三的template都需要有特定的代码来对其进行解析：
方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理；
方式一中的template我们必须要通过源码中一部分代码来进行编译；

所以，Vue在让我们选择版本的时候分为运行时+编译器 vs 仅运行时

运行时+编译器包含了对template模板的编译代码，更加完整，但是也更大一些；
仅运行时没有包含对template版本的编译代码，相对更小一些；

VSCode对SFC文件的支持
在前面我们提到过，真实开发中多数情况下我们都是使用SFC（ single-file components (单文件组件) ）。

我们先说一下VSCode对SFC的支持：

插件一：Vetur，从Vue2开发就一直在使用的VSCode支持Vue的插件；
插件二：Volar，官方推荐的插件（后续会基于Volar开发官方的VSCode插件）；

我们对代码打包会报错：我们需要合适的Loader来处理文件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HsfcT0p7-1655363966060)(https://oss-emcsprod-public.modb.pro/image/editor/20220419-1abee65b-82c2-4748-a245-2d72e0bde91f.png)]

这个时候我们需要使用vue-loader： npm install vue-loader -D

在webpack的模板规则中进行配置：

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

@vue/compiler-sfc

打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析： npm install @vue/compiler-sfc -D

另外我们需要配置对应的Vue插件：

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
  // 设置模式
  // development 开发阶段, 会设置development
  // production 准备打包上线的时候, 设置production
  mode: "development",
  // 设置source-map, 建立js映射文件, 方便调试代码和错误
  devtool: "source-map",
  
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]",
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "哈哈哈哈"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "./",
          globOptions: {
            ignore: [
              "**/index.html"
            ]
          }
        }
      ]
    }),
    new VueLoaderPlugin()
  ],
}

重新打包即可支持App.vue的写法

全局标识的配置

我们会发现控制台还有另外的一个警告：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tsRKQKIq-1655363966060)(https://oss-emcsprod-public.modb.pro/image/editor/20220419-a285a7c2-8493-440b-b571-6454a27c9501.png)]

在GitHub上的文档中我们可以找到说明:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HDto3hRj-1655363966060)(https://oss-emcsprod-public.modb.pro/image/editor/20220419-2c9801ab-c09d-46a7-b565-705936f4c5b6.png)]

这是两个特性的标识，一个是使用Vue的Options，一个是Production模式下是否支持devtools工具；
虽然他们都有默认值，但是强烈建议我们手动对他们进行配置；

浮游本尊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Babel

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。如果我们希望在命令行尝试使用babel，需要安装如下库：使用babel来处理我们的源代码：npm install @babel/cli @babel/core -D比如我们需要转换箭头函数...
复制链接

扫一扫