Vue学习笔记：4.Babel的使用与原理

babel:将ES6以上的语法转换为较低版本的可兼容语法的工具

1.babel的安装

@babel/core:babel的核心代码
@babel/cli:可以让我们在命令行使用babel

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

2.babel的简单使用

使用babel的preset预设，安装常用依赖

npm install @babel/preset-env -D

将demo.js中的语法转换成较低版本语法

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

3. babel的底层原理

babel的工作就是将一种源代码转换成另一种源代码，可以将babel看成一个编译器 babel的工作流程：

1. 解析阶段
2. 转换阶段
3. 生成阶段

4.在webpack中使用babel:babel-loader

module:{
      rules:[
          {
              test:/\.js$/,
              use:{
                  loader:"babel-loader",
                  options:{
                      plugins:[
                           //使用插件转换箭头函数和const、let
                          "@babel/plugin-transform-arrow-functions",
                          "@babel/plugin-transform-block-scoping"
                      ],
                      //或者配置presets
                      presets:[
                          "@babel/preset-env"
                      ]
                  }
              }
          }
      ]
}

当然，除了在webpack的配置文件中添加babel配置，我们也可以创建babel配置文件：babel.config.js或.babelrc.json

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

此时webpack.config.js中的配置可以修改成

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