webpack中babel的使用(四)

24 babel

1. babel介绍

08_babel对JS-Vue处理_01.jpg

2. babel命令行使用

08_babel对JS-Vue处理_02.jpg

在目录文件下创建demo.js

const message = "Hello World";
const names = ["abc", "cba", "nba"];
names.forEach(item => console.log(item));

然后使用命令行

npx babel demo.js --out-dir dist 就会创建一个dist文件夹，然后里面生成一个demo.js

npx babel demo.js --out-file test.js 就会在目录底下生成一个test.js

注意：生成的文件还是es6文件，如果需要转换为es5的话，就需要专门的实现特定功能的插件

3.插件的使用

08_babel对JS-Vue处理_03.jpg

安装好插件后，

npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions

之后test.js文件中的箭头函数就变成了普通的函数

const message = "Hello World";
const names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  return console.log(item);
});

//但是发现const还是没有做转化的，这时候就需要使用另外一个插件
//npm install @babel/plugin-transform-block-scoping -D
//npx babel demo.js --out-file  test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping 

然后就发现test.js就变成了下面

var message = "Hello World";
var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  return console.log(item);
});

4 babel的预设preset

es6语法很多，每转换一个就需要下载一个插件很麻烦，我们就可以使用preset，预设就是把常用的插件都集合在一起了

08_babel对JS-Vue处理_04.jpg

npx babel demo.js --out-file test.js --presets=@babel/preset-env

test.js

"use strict";

var message = "Hello World";
var names = ["abc", "cba", "nba"];
names.forEach(function (item) {
  return console.log(item);
});

5. Babel的底层原理

08_babel对JS-Vue处理_05.jpg

6. Babel编译执行原理

08_babel对JS-Vue处理_06.jpg

const name = "why"

原生代码，他会经过词法分析器，它会对源代码东西做提取，const name = "why"， 主要是做分割，const做一个分割，name做一个分割，等号做一个分割，“why"做一个分割， 分割完之后把这些东西放到一个数组里面，然后再经过语法分析，const是一个关键字，等号是赋值运算符，还有一个赋值的值，分析语法，然后帮助我们生成AST树，树的结构，把抽象的语法用树结构表现出来，接下来遍历这个语法生成树，然后遍历这个语法树，遍历的时候，发现有一个const，然后根据应用的插件，然后访问到const这个关键字的时候，就会对抽象语法树上的const这个关键字做一个转换，转换成对应的var，具体怎么转换根据它应用的插件是不同的，插件里面放着我们对应的转换的代码。转换完之后就会生成新的抽象语法树，再根据最终的这个抽象语法树，做最终代码的生成（code generation）,我们就能看到新的生成的源代码。babel帮我们做的事情就是编译器做的事情

7. babel-loader

08_babel对JS-Vue处理_07.jpg

往main.js里面加入es6语法，

npm install babel-loader @babel/core -D

然后发现npm run build之后，发现并没有把es6转换为es5.

8 指定使用的插件

08_babel对JS-Vue处理_08.jpg

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

9. babel-preset

08_babel对JS-Vue处理_09.jpg

或者使用preset

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

10 babel的配置文件

08_babel对JS-Vue处理_10.jpg

在目录下面创建babel.config.js文件

babel.config.js

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

然后webpack.config.js修改为下面

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