webpack (六) -babel加载器介绍-将 ES6 代码转为 ES5 代码 & babel-polyfill-支持ES6高阶函数

12-webpack-babel介绍

• 目前部分浏览器和 Node.js 已经支持 ES6，但由于它们对 ES6 所有的标准支持不全，这导致在开发中不敢全面地使用 ES6。——为了兼容IE浏览器优化

• Babel 是一个 JavaScript 编译器，能将 ES6 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题，把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码。

• 英文官网：https://babeljs.io/
  中文官网：https://www.babeljs.cn/

13-webpack-babel使用

在webpack官网-搜索关键字 babel-loader

babel-loader加载器插件包：https://webpack.js.org/loaders/babel-loader/#root

第一步：命令行安装包

npm install -D babel-loader @babel/core @babel/preset-env 

第二步：webpack.config.js中配置文件即可

module: {
  rules: [
    {
      //test 解析ES6语法为ES5语法
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,  //排除   第三方包
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

第三步：命令行运行代码，打包

npm run build

打包成功后，main.js文件中会看到cost—>var，箭头函数转普通函数等语法；

​ 说明babel插件包，已经验证生效

附：

以上操作是语法解析，但是ES6还更新了一些高阶函数。此时，需要依赖另一个包polyfill

见babel官网—>Docs—>polyfill

中文版 https://www.babeljs.cn/docs/babel-polyfill

第四步：命令行 安装polyfill

npm install --save @babel/polyfill

使用：必须优先导入模块，之后的js才可以使用当前模块提供的函数（实现了ES6提供的高阶函数）

第五步：为了支持ES6高阶函数，在src/index.js中首行导入

import "@babel/polyfill";

或者：

module.exports = {
  entry: ["@babel/polyfill", "./src/index.js"],
};

第六步：命令行运行代码，打包

npm run build

打包成功后，命令行中显示main.js的内存增大到456kb左右