webpack中babel的使用（学习篇10）

babel的作用主要是：把ES6代码转换为当前和旧版浏览器或环境中可以识别的js语法。下边说说babel在webpack中的用法。
安装：

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

• babel-loader为webpack做打包用的一个辅助工具
• @babel-core为babel的一个核心库，主要作用是转译语法

配置规则：

module: {
    rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/,
      loader: "babel-loader"
    }
}

配置项的作用：

• test: /.js$/ ⇒ 指编译js文件
• loader: “babel-loader” ⇒ 使用babel-loader工具进行转译
• exclude: /node_modules/ ⇒ 指的是如果你的js文件在node_modules里边，就不使用babel-loader了，因为它里边的代码都是些第三方代码，已经做好了转译的工作。

接下来还需安装：@babel-preset-env

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

安装@babel-preset-env的原因是：上边安装的babel-loader只是webpack和babel通讯的一个桥梁，但babel-loader并不能把JS里的ES6语法翻译为ES5语法。所以，还需要借助@babel-preset-env这个工具来做语法上的翻译。这个工具中包含了所有ES6翻译为ES5的规则。

@babel-preset-env配置：

module: {
   rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/,
     loader: "babel-loader",
     options: { // 给loader一个options配置参数
       presets: ["@babel/preset-env"]
     }
   }
}

index.js（ES6代码）

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];
arr.map(item => {
  console.log(item);
})

此时进行打包：

npx  webpack

注意：现在打包生成的dist.js文件只有29kb
在打包生成的dist.js文件里，我们看到已经完成了ES6语法到ES5语法上的翻译，但是还是会存在一些对象和方法，在低版本中是不兼容的。所以我们不仅要使用@babel/preset-env做语法上的转换，还要把低版本浏览器中缺失的一些变量、对象以及函数，补充到低版本的浏览器里。接下来，我们又需要借助@babel/polyfill工具来做低版本中特性的补充。具体安装配置看下方。

安装：

npm  install  --save  @babel-polyfill

引入：

// 在js入口文件中，所有代码运行之前引入
import  "@babel-polyfill";
const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];
arr.map(item => {
  console.log(item);
})

执行打包：

npx  webpack

注意：在引入@babel/polyfill之后打包生成的dist.js文件一下子增加到983kb

原因是：@babel/polyfill帮我们把所有低版本浏览器不兼容的一些变量、对象、方法等，全部处理并放到了dist.js文件里。但在实际应用中，我们只需要把用到的对象和方法，借助工具处理低版本的兼容问题，没有用到的特性，没有必要一并处理。从而提升打包效率，并减小项目的体积。
解决办法：我们可以通过一些配置项，实现按需处理低版本兼容问题，配置如下

module: {
   rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/,
     loader: "babel-loader",
     options: { // 给loader一个options配置参数
       presets: [["@babel/preset-env", {
			useBuiltIns: "usage"
		}]]
     }
   }
}

• useBuiltIns: “usage” ⇒ 指的是当babel/polyfill去填充低版本浏览器不兼容的方法和变量的时候，不是把所有的不兼容特性都加进去，而是用到了哪些，就填充哪些。（如上文中的map/promise等）

再次打包：

npx  webpack

注意：使用@babel/polyfill按需处理兼容的配置时，打包后的dist.js文件只有173kb, 所以推荐这种用法
?通过以上配置，此时，我们的代码就同样可以在低版本的浏览器中运行了。

接下来再来看一个优化配置：
由于我们的浏览器版本更新迭代非常快，所以，对于新版本（67以上）的chrome浏览器已经完全适配了ES6的语法，所以我们可以让67版本以上的chrome, 不必再做ES6向ES5的语法翻译，不必再填充兼容特性。
配置如下：

module: {
   rules: [{ 
     test: /\.js$/, 
     exclude: /node_modules/,
     loader: "babel-loader",
     options: { // 给loader一个options配置参数
       presets: [["@babel/preset-env", {
       		targets: {
               chrome: "67" // 对于大于67版本的浏览器，不填充兼容特性，不再做ES6向ES5的转换，默认支持
            },
			useBuiltIns: "usage"
		}]]
     }
   }
}

再次执行打包：

npx  webpack

注意：现在打包后的dist.js文件又回到了最初的大小，为29.4kb, 因为我用的是chrome 76版本

另： babel的配置有很多很多，更多信息请查看官方文档，不过目前的配置已经完全支持所有的ES6语法的转换了。