Babel总结

什么是babel？

babel是一个JavaScript编译器。

Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为向后兼容的旧浏览器或环境中JavaScript版本。

 

注解：传统的编译是指转化成可执行的代码，也就是二进制代码。但是对于前端来说，因为JS是解释性语言，对于浏览器或者Node来说就是可执行的代码。

因此，前端的编译就是指将语言转化为浏览器或Node可以执行的代码，也就是能执行的js语句。因为现在的很多浏览器未能全面支持ES6/7/8，基本都全部支持ES5了，

所以这时候就需要Babel来将它们转化成低版本的JS代码，比如ES5。

所以我们使用ES6时就要用到babel，使用jsx语法时也要用到babel。

 

preset和plugin

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。

这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。

但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。

这个时候，可以采用Babel Preset。

可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。

具体可看这里

 

什么是polyfill？

由于 Babel 只转换语法(如箭头函数)， 你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。

它会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。这个 polyfill 会在使用 babel-node 时自动加载。

这意味着你可以使用新的内置对象比如 Promise 或者 WeakMap, 静态方法比如 Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。

 

如何使用babel？

因为现在基本上都是用webpack构建项目，主要讲下如何在webpack中使用babel。

当然如果你只是想单独体验babel的话，可以安装babel的脚手架babel-cli：babel-cli

1.安装

需要的是babel-loader和babel-core，babel-core是babel核心代码库，babel-loader用于在打包前对代码进行编译转换。

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

 

2.在webpack中配置

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

 

3.创建.babelrc文件

虽然已经配置好了 Babel ，但并没有让它真正生效。在项目的根目录中创建一个.babelrc文件并启用一些插件。

首先，你可以使用转换 ES2015+ 的 env preset 。

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

 

为了让 preset 生效，你需要像下面这样定义你的 .babelrc 文件：

{
  "presets": ["env"]
}

 

如何使用babel-polyfill？

1.安装

npm install --save babel-polyfill

 

2.使用

a.在node/browserify中使用

你需要在你的应用入口顶部通过 require 将 polyfill 引入进来。

require("babel-polyfill");

如果你在你的应用入口使用 ES6 的 import 语法，你需要在入口顶部通过 import 将 polyfill 引入，以确保它能够最先加载：

import "babel-polyfill";

 

b.在webpack中使用

在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中：

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};