webpack學習-配置babel(js編譯器)

如下是學習筆記:

1.babel的做用是將 新的ES語法 轉化爲瀏覽器能識別的語法(語法轉換)

1.1-安裝包

npm i -D babel-core babel-loader@7 
npm i -D babel-preset-env //env支持ES6,ES7,ES8,至關於告訴babel處理要處理這些新的語法

1.2-配置babel

// 在module下rules中配置babel
      {
        test: /\.js$/,
        use: 'babel-loader',
        // 排除掉不須要 babel 處理的文件路徑
        // 通常，都會將 node_modules 排除掉,由於裏面全是ES5語法
        exclude: /node_modules/
      }

1.3-在項目根目錄下新建.babelrc文件,在裏面配置預設信息

{
  "presets": ["env"]

}

1.4-讓babel處理那些處於草案階段還未成爲標準的語法

安裝包並配置

npm i -D babel-preset-stage-2

{
  "presets": ["env", "stage-2"]

//好比對象的拓展運算符{...obj}不是標準,配置stage-2就能夠讓babel編譯草案階段還未成爲標準的語法,只要能進入草案階段,幾乎就能夠肯定會成爲標準
}

 

2.babel實現瀏覽器兼容最新版ES的API(transform-runtime或babel-ployfill)

以transform-runtime爲例

npm i -D babel-plugin-transform-runtime
npm i -S babel-runtime

在.babelrc中配置

"plugins":[
"transform-runtime"
]