babel速览

babel

babel初衷

在es6出现以后，因为此版本的巨大改变，给人们带来了不少革命性的技术支持，可是当时不少浏览器对es6支持有限，babel就是为了达到写最新的语法，能够在任意浏览器运行而出现的。

实现原理简介

babel本质就是输入新代码输出旧代码，它属于编译原理的应用具体过程以下：

code -> AST  解析

modifyAST  修改

AST  -> code 生成

原理因为是暂时入门，知道思想便可，之后再实践操做

语法编译

咱们知道了其实babel是一个编译器，全部动做都会修改AST达到咱们的目的，那么支持新语法，也是这个原理，如何提供修改的接口呢，babel引入了插件的概念，插件能够操做AST，这样就解决了扩展问题

因此，新语法都是有对应的插件的

这个时候我脑子想起来es6语法那么多，总不可能一个一个配置吧，放心，babel官方也想到了这个问题，开启了一系列的探索

.babelrc是babel的配置文件，语法须要配置presets选项

1.单个引入插件

优势：无

缺点：

• 配置繁琐

使用方法

// 安装
npm install --save-dev @babel/plugin-transform-arrow-functions

// 配置

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

2.stage-x

这是根据ES目前提案的进展来安装一系列插件的

Stage 0 - 稻草人: 只是一个想法，通过 TC39 成员提出便可。

Stage 1 - 提案: 初步尝试。

Stage 2 - 初稿: 完成初步规范。

Stage 3 - 候选: 完成规范和浏览器初步实现。

Stage 4 - 完成: 将被添加到下一年度发布

低级的会包裹高级的

优势：

配置方便

缺点：

因为使用了非规范肯定的语法，一旦语法提案发生重大改变，代码会受到重大影响

使用方法

npm install --save-dev @babel/preset-stage-0

{
  "presets": ["stage-0"]
}

3.es201x

这个是每一年更新一次，包括了标准规范的语法

优势：

配置少，风险少

缺点：

配置不够灵活，每一年须要更换

使用

npm install --save-dev babel-preset-es2015

{
  "presets": ["es2015"]
}

4.env

优势：

1.配置简单

2.无语法破坏风险

3.持续更新

4.更强大、灵活的配置方法

使用方法

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

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

API编译

env核心配置讲解

useBuiltIns

此选项要在代码入口顶层引入"@babel/polyfill

useBuiltIns: 'entry'

优势

不像默认导入，须要把整个polyfill导入，而是能够按照浏览器列表支持，选择性的加载

缺点

体积仍是相对较大

npm install @babel/polyfill --save

import "@babel/polyfill";

此时能够根据browserslist配置根据运行环境编译语法

不配置browserslist的webpack打包大小

useBuiltIns: 'usage'

优势：

只有用到的才polyfill,能够说是完美了

缺点

不会探测引用node_modules代码，这部分不会提供polyfill，若是第三方包没有编译成兼容版本，就可能报错

npm install @babel/polyfill --save

import "@babel/polyfill";

此时会根据项目中引用到语法按需polyfill，体积较小

babel用法

原型开发

适合实时查看babel一些转译方案

https://babeljs.io/repl

浏览器纯编译

<div id="output"></div>
<!-- Load Babel -->
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

node纯编译

require-hook

原理

拦截require行为，在require时对文件进行实时编译

用法

在应用入口

require("babel-register");

import "babel-register";

babel-cli

用法

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

增长npm脚本
"scripts": {
  "build": "babel src -d lib"
}

搭配webpack或者gulp构建工具

这部分查看官方文档便可

gulp

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

webpack

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