前言

大家好，我又来了，这篇呢，带来 babel 的使用，让大家对 babel 有一个认识，同时能也能快速上手。

Babel 是什么？

Babel 是一个 JavaScript 编译器，通俗来讲，就是把高版本的js编译成低版本的js，以便浏览器识别。

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

项目结构

我这里的项目结构如下，基本与前面几篇基本没啥区别。

babel包含的各种包

@babel/core

即babel-core，将ES6代码转换为ES5。7.0之后，包名升级为@babel/core。

进行安装：
npm i @babel/core -D
npm i @babel/cli -D

创建 js 文件，内容如下：

const title = 'babel 兼容处理';

const fn = () => {
    console.log(title);
}

fn()

进行打包操作，在 dist 文件夹下的 build.js 可以看到，并没有做处理，只是拷贝了一份过来。

在控制台输入命令： npx babel src/js/babel.js --out-dir build

运行后会多出一个 build 文件夹

打开 babel.js 发现与编写的代码一模一样。

@babel/plugin-transform-arrow-functions

接上文，可以看到，还是一样的箭头函数的方式，让它转变成普通函数的写法，需要用到 @babel/plugin-transform-arrow-functions 。

安装: npm install @babel/plugin-transform-arrow-functions -D

删除掉刚添加出来的 build 文件夹，并执行下面的命令重新生成这个文件夹。

执行命令: npx babel src/js/babel.js --out-dir build --plugins=@babel/plugin-transform-arrow-functions

回到 babel.js ,进行查看，函数方式就变了

@babel/plugin-transform-block-scoping

这里看到是使用 const 来定义，跟箭头函数一样不太友好，此时也可以对它进行转换，转换成 var ,需要用到 @babel/plugin-transform-block-scoping,它可以把 let/const 转换成 var 。

安装: npm install @babel/plugin-transform-block-scoping -D

运行命令: npx babel src/js/babel.js --out-dir build --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

这里简单说明，命令用逗号隔开，是使用了前后两个插件，分别是把 箭头函数 转换成 普通函数 ，let/const 转换成 var 。

@babel/preset-env

@babel/preset-env是一个智能预设，它允许您使用最新的 JavaScript，而无需管理目标环境需要哪些语法转换，这既让你更轻松，也让 JavaScript 包更小！

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

命令： npx babel src/js/babel.js --out-dir build --presets=@babel/preset-env

可以看到这里只使用了 @babel/preset-env 一个插件，就实现了上文的两个插件转换，同时加入了严格模式。

这样就不用老是去手动命令转换了，节省效率。

babel-loader

安装： npm install babel-loader -D

在 webpack.config.js 进行配置

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

此时就可以进行 JS 语法的转换了，插件@效果同上文，不用在敲命令运行了。

当然，也可以结合 preset-env

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

这样就不用配置繁琐的 plugins 插件项了，简单省事。。。

总结

babel 是必不可少的东西，当你的代码写法过高，低版本的浏览器就无法识别，需要把高版本的js编译成低版本的js 。

以上就是我对 babel 基础使用的认识，如有不足活不对的地方请多多包涵。。。

babel的基础使用

前言