webpack随笔2--编译ES6/ES7

一、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