什么是babel

在开发过程中，我们很少直接去接触babel，但是对于前端开发来说，babel是必不可少的一部分。

在开发过程中，想要使用ES6+的语法，typescript，开发react项目等，都是离不开babel

babel到底是什么？做了什么？

babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转化为向后兼容JavaScript。让浏览器能够认识并执行。

包括：语法转换、源代码转化

// es6
class person{
    constructor(){
    this.name = name
    }
}
// 转化 // 网址 https://babeljs.io/repl
"use strict";

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, "prototype", { writable: false });
  return Constructor;
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var person = /*#__PURE__*/ _createClass(function person() {
  _classCallCheck(this, person);

  this.name = name;
});

babel使用方式

总共存在三种方式：

使用单体文件 (standalone script)
命令行 (cli)
构建工具的插件 (webpack 的 babel-loader, rollup 的 rollup-plugin-babel)。

babel本身可以作为一个独立的工具来使用，可以安装 @babel/core（babel的核心代码）， @babel/cli（可以让我们在命令行中使用babel）

// 安装babel/core和babel/cli
//  --out-dir 输出目录 --out-file 输出文件
// demo.js  运行：npx babel demo.js --out-dir dist
const message = 'hello babel'
//若要转化const等
//npm install @babel/plugins-transform-block-scoping -D
const name = ['q','z','f']
// 若我们需要把转化箭头函数，需要安装插件
// npm install @babel/plugin-transform-arrow-functions -D
// demo.js  运行：npx babel demo.js --out-dir dist --pulgins=@babel/plugin-transform-arrow-functions
name.forEach(item=>console.log(item))


//运行：npx babel demo.js --out-dir dist --pulgins=@babel/plugin-transform-arrow-functions, @plugins-transform-block-scoping

babel提供了preset，不需要单独安装，每种不同的插件

安装babel preset（预设）

// npm install @babel/preset-env -D
// 运行 npx babel demo.js --out-dir dist --presets=@babel/preset-env

babel底层原理

我们可以把babel就看成是一个编译器，babel把源代码，转化成浏览器可以识别的另外一段源代码。

存在三个阶段。

解析阶段（Parsing）：经过词法分析器，提取关键字，进行分割，然后放到数组中，在进行语法分析。

转化阶段（Transformation）：生成AST抽象语法树，遍历抽象语法树，在便利的过程中使用插件，进行转化。

生成阶段（Code Generation）：生成新的抽象语法树，生成最新的代码。

webpack结合babel对代码进行转化

webpack是一个模块化的打包工具，提供给我们了ESmodule，commonjs等，并不会帮助我们做一些语法的转化（例如：es6->es5）。

若我们要打包后将代码转化为es5，

babel使用的时候安装了babel-loader，还需要使用另外的babel插件

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 使用babel-loader, babel-core也需要安装
        test: /.js/,
        use: ['babel-loader']，
        options:{
          //需要额外安装插件来处理数据等
          // plugins:[
          // '@babel/plugin-transform-arrow-functions', 
          // '@plugins-transform-block-scoping'
          // ]
          presets: [
            "@babel/preset-env"
          ]
        }
      },
        ...
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'xxx',
  devServer: {
...
};

抽取babel配置文件

babel两种配置文件命名编写

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

.babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件：早期使用较多的配置

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

聊一聊babel