在 webpack 中编写 JavaScript 代码，可以使用最新的 ES 语法，而最终打包的时刻，webpack 会借助 Babel 将 ES6 语法转换成在目的浏览器可执行 ES5 语法。以是 Babel 是一个主要的知识点需要掌握。

什么是 Babel

Babel 是 JavaScript 的编译器，通过 Babel 可以将我们写的最新 ES 语法的代码轻松转换成随便版本的 JavaScript 语法。随着浏览器逐步支持 ES 尺度，我们不需要改变代码，只需要修改 Babel 设置即可以适配新的浏览器。
举例说明，下面是 ES6 箭头函数语法的代码：

[1,2,3].map(n => n**2);

经由 Babel 处置后，可以转换为通俗的 ES5 语法：

[1,2,3].map(function(n) {
 return Math.pow(n, 2);
});

Babel 初体验

下面来先容下 Babel 的安装和功效及其设置文件。

1. 使用 babel-cli 下令行工具

Babel 自己自己带有 CLI（Command-Line Interface，下令行界面）工具，可以单独安装使用。下面我们在项目中安装 @babel/cli 和 @babel/core。

npm i -D @babel/core @babel/cli

然后确立一个 babel.js 文件：

// babel.js
[1,2,3].map(n => n**2);

然后执行npx babel babel.js，则会看到输出的内容，此时可能会看到输出的内容跟源文件内容没有区别，这是由于没有加转换规则，下面安装@babel/preset-env。然后执行 CLI 的时刻添加 --presets flag：

// 安装 preset-env
npm i -D @babel/preset-env
// 执行 CLI 添加 --presets
npx babel babel.js --presets=@babel/preset-env

最终输出的代码就是转换为 ES5 的代码了：

‘use strict'
[1,2,3].map(function(n) {
 return Math.pow(n, 2);
});

若是要输出效果到牢靠文件，可以使用 --out-file 或 -o 参数：

npx babel babel.js -o output.js。

Tips: Babel 7 使用了 @babel 命名空间来区分官方包，因此以前的官方包 babel-xxx 改成了 @babel/xxx。

2.设置文件

除了使用下令行设置 flag 之外，Babel 还支持设置文件，设置文件支持两种：

使用 package.json 的 babel 属性；

在项目根目录单独确立 .babelrc或者 .babelrc.js文件。

示例如下：

// package.json
{
 ‘name': ‘my-package',
 ‘version': ‘1.0.0',
 ‘babel': {
 ‘presets': [‘@babel/preset-env']
 }
}
 
// .babelrc
{
 ‘presets': [‘@babel/preset-env']
}

Babel会在正在被转义的文件当前目录中查找一个 .babelrc 文件。 若是不存在，它会向外层目录遍历目录树，直到找到一个 .babelrc 文件，或一个 package.json 文件中有 "babel": {}。

3.env 选项

若是我们希望在差其余环境中使用差其余 Babel 设置，那么可以在设置文件中添加 env 选项：

{
 ‘env': {
 ‘production': {
  ‘presets': [‘@babel/preset-env']
 }
 }
}

env 选项的值将从 process.env.BABEL_ENV 获取，若是没有的话，则获取 process.env.NODE_ENV 的值，它也无法获取时会设置为 "development"。

Babel 的插件和 Preset

Babel 的语法转换是通过壮大的插件系统来支持的。Babel 的插件分为两类：转换插件和语法剖析插件。

差其余语法对应着差其余转换插件，好比我们要将箭头函数转换为 ES5 函数写法，那么可以单独安装 @babel/plugin-transform-arrow-functions 插件，转换插件主要职责是举行语法转换的，而剖析插件则是扩展语法的，好比我们要剖析 jsx 这类 React 设计的特殊语法，则需要对应的 jsx 插件。

若是不想一个个的添加插件，那么可以使用插件组合 preset（插件预设，插件组合加倍好明白一些），最常见的 preset 是 @babel/preset-env。之前的 preset 是根据 TC39 提案阶段来分的，好比看到 babel-preset-stage-1 代表，这个插件组合内里是支持 TC39< Stage-1 阶段的转换插件聚集。

@babel/preset-env 是 Babel 官方推出的插件预设，它可以凭证开发者的设置按需加载对应的插件，通过 @babel/preset-env 我们可以凭证代码执行平台环境和详细浏览器的版原本产出对应的 JavaScript 代码，例如可以设置代码执行在 Node.js 8.9 或者 iOS 12 版本。

Babel polyfill

Babel 只认真举行语法转换，即将 ES6 语法转换成 ES5 语法，然则若是在 ES5 中，有些工具、方式现着实浏览器中可能是不支持的，例如：Promise、 Array.prototype.includes，这时刻就需要用 @babel/polyfill 来做模拟处置。@babel/polyfill 使用方式是先安装依赖，然后在对应的文件内显性的引入：

// 安装，注重由于我们代码中引入了 polyfill，以是不再是开发依赖（--save-dev，-D）
npm i @babel/polyfill

在文件内直接 import 或者 require 进来：

vue的路由映射问题及解决方案，这篇文章主要介绍了vue的路由映射问题及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下，vue的路由映射问题及解决方案

// polyfill
import ‘@babel/polyfill'
console.log([1,2,3].includes(1));

Bable runtime

@babel/polyfill 虽然可以解决模拟浏览器不存在工具方式的事情，然则有以下两个问题：

直接修改内置的原型，造玉成局污染；

无法按需引入，Webpack 打包时，会把所有的 Polyfill 都加载进来，导致产出文件过大。

为领会决这个问题，Babel 社区又提出了 @babel/runtime 的方案，@babel/runtime 不再修改原型，而是接纳替换的方式，好比我们用 Promise，使用 @babel/polyfill 会发生一个 window.Promise 工具，而 @babel/runtime 则会天生一个 _Promise （示例而已）来替换掉我们代码中用到的 Promise。另外 @babel/runtime 还支持按需引入。下面以转换 Object.assign 为例，来看下 @babel/runtime 怎么使用。

• 安装依赖 @babel/runtime：npm i @babel/runtime；
• 安装 npm i -D @babel/plugin-transform-runtime 作为 Babel 插件；
• 安装需要转换 Object.assign 的插件：

npm i -D @babel/plugin-transform-object-assign

编写一个 runtime.js 文件，内容如下：

Object.assign({}, {a:1});

执行 npx babel runtime.js --plugins @babel/plugin-transform-runtime,@babel/plugin-transform-object-assign，最终的输出效果是：

import _extends from ‘@babel/runtime/helpers/extends';
_extends(
 {},
 {
  a:1
 }
);

代码中自动引入了 @babel/runtime/helpers/extends 这个模块（以是要添加 @babel/runtime 依赖啊）。
@babel/runtime也不是完善的解决方案，由于 @babel/runtime 不修改原型，以是类似[].includes() 这类使用直接使用原型方式的语法是不能被转换的。

Tips：'@babel/polyfill'现实是 core-js和
regenerator-runtime的合集，以是若是要按需引入'@babel/polyfill'的某个模块，可以直接引入对应的
core-js 模块，然则手动引入的方式照样太费劲。

@babel/preset-env

铺垫了这么多，我们继续来讲 @babel/preset-env，前面先容了@babel/preset-env 可以零设置的转化 ES6 代码，我们若是要细腻化的使用 @babel/preset-env ，就需要设置对应的选项了，在 @babel/preset-env 的选项中，useBuiltIns 和 target 是最主要的两个， useBuiltIns 用来设置浏览器 polyfill，target 是为了目的浏览器或者对应的环境（browser/node）。

preset-env 的 useBuiltIns

前面先容了 @babel/polyfill 和 @babel/runtime 两种方式来实现浏览器 polyfill，两种方式都对照繁琐，而且不够智能，我们可以使用 @babel/preset-env 的 useBuildIn 选项做 polyfill，这种方式简朴而且智能。
useBuiltIns 默以为 false，可以使用的值有 usage 和 entry：

{
 ‘presets': [
 ‘@babel/preset-env', {
  ‘useBuiltnls': ‘usage|entry|false'
 }
 ]
}

usage 示意明确使用到的 Polyfill 引用。在一些 ES2015 语法不支持的环境下，每个需要用到 Polyfill 的引用时，会自动加上，例如：

const p = new Promise();
[1,2].includes(1);
‘foobar'.includes(‘foo');

使用 useBuiltIns='usage' 编译之后，上面代码酿成，真正的做到了按需加载，而且类似 [].includes() 这类直接使用原型方式的语法是能被转换的：

‘use strict'
require(‘core-js/modules/es.array.includes');
require(‘core-js/modules/es.object.to-string');
require(‘core-js/modules/es.promise');
require(‘core-js/modules/es.string.includes');
var p = new Promise();
[1,2].includes(1);
‘foobar'.includes(‘foo');

entry 示意替换 import "@babel/polyfill";（新版本的 Babel，会提醒直接引入 core-js或者regenerator-runtime/runtime来取代 @babel/polyfill）的全局声明，然后凭证 targets 中浏览器版本的支持，将 polyfill 拆分引入，仅引入有浏览器不支持的 polyfill，以是 entry 相对 usage 使用起来相对穷苦一些，首先需要手动显性的引入 @babel/polyfill ，而且凭证设置 targets 来确定输出，这样会导致代码现实用不到的 polyfill 也会被打包到输出文件，导致文件对照大。

一样平常情形下，小我私人建议直接使用 usage 就知足一样平常开发了。

需要提一下的是，polyfill 用到的 core-js 是可以指定版本的，好比使用 core-js@3，则首先安装依赖 npm i -S core-js@3，然后在 Babel 设置文件 .babelrc 中写上版本。

// .babelrc
{
 ‘presets': [
 [
  ‘@babel/preset-env',
  {
   ‘useBuiltlns': ‘useage',
   ‘corejs': 3
  }
 ]
 ]
}

preset-env 的 target

假设希望代码中使用 ES6 的模板字面量`语法，然则现实执行代码的宿主浏览器是 IE 10 却不支持，那么我们可以使用target指定目的浏览器了。

{
 ‘presets': [
  [
  ‘@babel/preset-env',
  {
   ‘targets': {
    ‘browsers': ‘IE 10'
   }
  }
  ]
 ]
}

若是我们代码是在 Node.js 环境执行的，则可以指定 Node.js 的版本号：

{
 ‘presets': [
 [
  ‘env',
  {
  ‘@babel/preset-env': {
   ‘node: ‘8.9.3'
  }
  }
 ]
 ] 
}

targets.browsers 需要使用 browserslist 的设置方式，然则其设置会被 targets.[chrome, opera, edge, firefox, safari, ie, ios, android, node, electron] 笼罩；
targets.node 设置为 true 或 "current" 可以凭证当前 Node.js 版本举行动态转换。也可以设置为详细的数字示意需要支持的最低 Node.js 版本；
targets.esmodules 设置使用 ES Modules 语法，最新浏览器支持，这个在后面 Webpack 插件章节会详细先容若何实现 Modern Mode。

在 Webpack 中使用 Babel

通过上面的内容，我们已经掌握了 Babel 的基本用法，下面在 webpack 中使用 Babel 就变得很简朴了，首先安装 npm 依赖，然后修改 webpack.config.js。

安装依赖包：

// 安装开发依赖
npm i webpack babel-loader webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D

// 将 runtime 作为依赖
npm i @babel/runtime -S

第二步确立 webpack.config.js 文件，内容如下：

// webpack.config.js
module.exports = {
 entry: ‘./babel.js',
 mode: ‘development',
 devtool: false,
 module: {
 rules: [
  {
  test: /.js$/,
  use: [
   {
   loader: ‘babel-loader',
   options: {
    presets: [
     [
     ‘@babel/preset-env',
     {
      useBuiltlns: ‘usage'
     }
     ]
    ]
   }
   }
  ]
  }
 ]
 }
}

上面的 webpack.config.js 文件直接将 Babel 的设置写到了 options 中，还可以在项目根目录下确立 .babelrc 或者使用 package.json 的 babel 字段。

小结

在本篇中，我们学习了 Webpack 怎么设置 Babel，希望对人人有所辅助，若是喜欢萝卜的文章，请人人连续关注，下一篇我将给人人先容 webpack-dev-server 这个超好用的工具。

以上就是本文的所有内容，希望对人人的学习有所辅助，也希望人人多多支持爱蒂网。

您可能感兴趣的文章:

• 详解webpack 配合babel 将es6转成es5 超简质朴例
• Webpack4 Babel7 ES6兼容IE8的实现
• Webpack 之 babel-loader文件预处置器详解
• 详解webpack babel的设置
• 详解webpack2 node react babel实现热加载(hmr)
• 详解用Webpack与Babel设置ES6开发环境
• 详解webpack运行Babel教程
• webpack4与babel配合使es6代码可运行于低版本浏览器的方式
• webpack4.x下babel的安装、设置及使用详解
• Webpack4 使用Babel处置ES6语法的方式示例