Babel学习笔记

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

1.安装

全局安装：npm install -g babel-cli

查看版本号：webpack -v

2.转码过程

①创建一个Babel文件夹。

②初始化项目：打开cmd，cd到该文件夹下，通过npm init -y指令，生成一个package.json文件。

③在Babel文件夹下创建一个子文件夹命名为src，在src文件夹下存放需要转码的js文件。

④在Babel文件夹下创建一个子文件夹命名为.babelrc，写入转码规则：

{
    "presets": ["es2015"],
    "plugins": []
 }

⑤安装转码器：cnpm install --save-dev babel-preset-es2015

⑥转码：babel src -d dist，在文件夹下生成了一个dist文件夹，里面存放了一个与之前js文件同名的js文件，即为转码为ES2015的文件。

3.自定义脚本

在package.json的scripts中添加命令，达到简化命令的效果，省去一串代码的繁琐。

如上文通过babel src -d dist来生成转码文件，现在我们只需要在scripts中添加"dev":"babel src -d dist"，使用npm run dev即可执行。