webpack隨筆2--編譯ES6/ES7

1、Babel

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

 

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