目前，ES6（ES2015）這樣的語法已經(jīng)得到很大規(guī)模的應(yīng)用，它具有更加簡潔、功能更加強大的特點，實際項目中很可能會使用采用了ES6語法的模塊，但瀏覽器對于ES6語法的支持并不完善。為了實現(xiàn)兼容，就需要使用轉(zhuǎn)換工具對ES6語法轉(zhuǎn)換為ES5語法，babel就是最常用的一個工具

• babel轉(zhuǎn)化語法所需依賴項：

  • babel-loader： 負責(zé) es6語法轉(zhuǎn)化
  • babel-core： babel核心包
  • babel-preset-env：告訴babel使用哪種轉(zhuǎn)碼規(guī)則進行文件處理

• 安裝依賴

  npm install babel-loader @babel/core @babel/preset-env --save-dev
  

• 配置webpack.config.js文件

        {
        test:/\.js$/,
        exclude:/node_modules/,
        use:'babel-loader'
      }
  

• 新建 .babelrc文件配置轉(zhuǎn)換規(guī)則

  {
    "presets":["@babel/preset-env"]
  }
  

• 或者直接在webpack.config.js文件中配置規(guī)則

        {
        test:/\.js$/,
        exclude:/node_modules/,
        use:{
            loader:'babel-loader',
            options:{
              presets:['@babel/preset-env']
            }
        }
      }