一、Babel
1、安装babel
Bable-loader: babeljs.io babel最新版:npm install babel-loader@8.0.0-beta.0 @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 babel-loader@8.0.0-beta.0 @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