一、Babel
1、安装babel
Bable-loader：
babeljs.io
babel最新版：npm install [email protected] @babel/core
常规：npm install --save-dev babel-loader babel-core
2、针对语法 Babel Presets ：规范的一个总结 es2015 es2016 es2017 env：包含上面这几种
babel-preset-react
babel-preset-stage 0 - 3
npm install @babel/preset-env -save-dev //对应上面的最新版本
npm install babel-preset-env -save-dev //对应上面普通版本 targets：目标==》指定哪些语法编译 哪些语法不编译
targets.browsers //指定浏览器
targets.browsers:"last 2 versions"
targets.browsers:">1%"
browserslist
can i use
3、babel-loader preset-env
（1）初始化
npm init
npm install [email protected] @babel/core
（2）配置webpack.config.js
module.exports = {
entry:{
app:'app.js'
},
output:{
filename:'[name].[hash:8].js'
},
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader',
exclude:'/node_modules'
}
]
}
}
(3)下载preset-env
npm install @babel/preset-env --save -dev
//指定presets
use:{
loader:'babel-loader',
options:{
loader:'babel-loader',
presets:['@babel/preset-env']
},
exclude:'/node_modules'
} //targets:根据你指定的目标选择哪些语法编译和不编译
targets.browsers //可以指定浏览器
targets.browsers:"last 2 versions"
targets.browsers:">1%"
//数据来源
browserlist
can i use //输入css 或是js 看浏览器的支持程度
（4）配置preset参数
//给preset指定参数
presets:[
['@babel/preset-env',{
targets:{
browsers:['1%','last 2 version']
}
}]
]
（5）在app.js里写些例子
//在app.js
let fun = () =>{}
const num = 45
let arr [1,2,4]
let arrB=arr.map(item=>item*2) console.log(new set(arrB))
（6）打包
//打包
webpack
3、针对函数和方法：Babel Polyfill Babel Runtime Transform
（1） Babel Polyfill 垫片：全局垫片 为应用准备
npm install babel-pollyfill -save
import "babel-polyfill" //使用
(2) Babel Runtime Transform 局部垫片 为开发框架准备
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
.babelrc //使用 在根目录下
有些babel处理不了的新的方法 Generator Set Map Array.from Array.prototype.includes
（3）pollyfill的使用
例子 在上面的app.js 里
import‘babel-pollyfill’
function* func(){} （4）runtime的使用
在.babelrc里
{
"presets":[
["@babel/preset-env",{
"targets":{
"browswers":["last 2 version"]
}
}]
],
"plugins":["transform-runtime"]
}
npm install @babel/runtime --save
npm install @babel/plugin-transform-runtime --save-dev