目录
Babel是什么?
Babel是一个javascript编译器即一个工具链，主要用于在旧的浏览器或环境中将ECMAScript2015+代码转换为向后兼容版本的javascript代码。
命令行转换babel-cli
全局环境下进行Babel转换。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。
安装
1) 安装 babel-cli
$ sudo npm install --global babel-cli
2) 安装预设
$ npm install --save-dev babel-preset -latest
3) 在项目中添加配置文件
在当前项目的根目录下创建该文件 vim .babelrc
{
"presets":["latest"]
}
**:红色标注的要保持一致,具体原因请看后面的配置文件信息
使用
转换结果输出到标准输出
$ babel example.js
将结果输出到指定文件
$ babel example.js -o index.js
整个目录转码 --out-dir 或 -d 参数指定输出目录
$ babel src -d lib
配置文件
Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的前，应先配置这个文件。该文件用来设置转码规则和插件，基本如下:
{
"parsets":[],
"plugins":[]
}
parsets字段设定转换规则，官方提供以下规则集。
ES2015转码规则
$ npm install babel-preset-es2015 --save-dev
最新转码规则
$npm install babel-preset-latest --save-dev
不会过时的转码规则
$npm install babel-preset-env --save-dev
最后将这些规则加入.babelrc.例如 将最新转码规则加入
{“presets”:["latest"]}
babel-polyfill
Babel默认只转换新的javascript语法，但并不转换新的API，比如 Generator、Set、Symbol、promise等全局对象，以及一些定义在全局对象上的方法都不会转码。如果想让这些方法运行则必须使用babel-polyfill。
安装
$ npm install --save babel-polyfill
在js中使用
require("babel-polyfill");
将Babel集成到webpack中
Babel配置
1) 安装babel-loader与babel-core
$ npm install babel-core babel-loader --save-dev
2)安装预设
$ npm isntall babel-preset-latest --save-dev
3)配置.babelrc
{“presets”:["latest"]}
webpack配置
1)安装webpack
$ npm install webpack webpack-cli --save-dev
2)添加配置文件 webpack.config.js
const path=require('path');
module.exports={
entry:'./index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[{
test:/\.js$/,
use:'babel-loader'
}]
}
}
3) 修改package.json
"scripts":{
"build":"webpack"
}
4)打包
$ npm run bulid
可能会报如下错误:
cdCannot find module '@babel/core' babel-loader@8 requires Babel 7.x,如果按我上面步骤我们装的babel-loader是8.0.4版本，因为我们只需要重新装7版本。
npm install babel-loader@7 --save-dev
拓展
npm中 save与 save-dev区别
--save
会将依赖安装到package.json 中的 dependencies中
--save-dev
会将依赖安装在package.json中的devDependencies
"dependencies"：应用程序在生产中需要这些包,即项目上线后所依赖的环境。
"devDependencies"：这些包仅用于开发和测试,即开发中所需要的产品中就不需要。