美文网首页马文的地下室
学习笔记 《Babel》

学习笔记 《Babel》

作者: 马文Marvin | 来源:发表于2017-04-27 18:05 被阅读14次

作为一门按照标准制定,浏览器厂商各自实现的程序语言,从新语法的提出到标准化,需要经历漫长的历程,Babel 的价值就在于可以在新语法出现之前,尝鲜各种新语法,而不用担心浏览器兼容的问题,所以把 Babel 称为「编译」是非常合适的

对于一门与时俱进的语言而言,这样的「编译」机制是非常重要的,才有了各种各样创新的机会存在,CoffeeScript、TypeScript 都是在这样的情况下产生和发展起来的

Babel Presets

Babel 由许许多多的插件构成,然后不同的插件组合到一起成为一个 Preset,官方支持的 Presets 有:

env: 自身运行的基础插件包
es2015: es2015 支持插件包
es2016: es2016 支持插件包
es2017: es2017 支持插件包
latest: es2015+es2016+es2017支持的插件包
react: react 支持的插件包
flow: flow 支持的插件包(支持变量类型检测)

在 github 上可以搜索到近千个用户自定义出来的 babel 插件包:https://www.npmjs.com/search?q=babel-preset

此外官方还提供对于正在标准化过程中的JS语法方面的插件包,他们内部本身是向前保持依赖关系的,可以通过 npm view babel-preset-stage-0 类似的命令查看到:

Stage 0: 草案阶段
Stage 1: 提议阶段
Stage 2: 起草阶段
Stage 3: 候选阶段
Stage 4: 完成阶段

Babel Polyfill

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。

要使用这些新的接口,就要调用 babel-polyfill 插件:

npm install babel-polyfill

程序中:

import "babel-polyfill"

Webpack中:

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

Babel Babili

Babel 官方还自己做了一个叫做 babili 的 JS 压缩工具:
https://github.com/babel/babili

Babel 的使用

Babel 的使用需要借助 .babelrc 或者 package.json 文件,官方文档有详细的介绍:
https://babeljs.io/docs/usage/babelrc/

相关文章

  • babel学习笔记

    babel 转译 安装以下依赖: @babel/core调用 Babel 的 API 进行转码 babel-loa...

  • Babel 学习笔记

    基本使用 新建项目目录,初始化 npm 在项目根目录下安装 Babel 每年每个 preset (es2015) ...

  • 学习笔记 《Babel》

    作为一门按照标准制定,浏览器厂商各自实现的程序语言,从新语法的提出到标准化,需要经历漫长的历程,Babel 的价值...

  • Babel 学习笔记

    在 Github 上 Fork 了别人的代码,在 package.json 中看到了很多与 Babel 有关的包,...

  • babel学习笔记

    阮一峰babel入门教程 babel官网 一、配置 .babel 文件 { "presets":["es2015...

  • babel学习笔记

    本文源代码: babel入门 创建一个package: 安装babel: 安装babel-polyfill: 需要...

  • babel 学习笔记

    参考了很多文章,只是为了搞清楚babel 7 之后容易搞混的概念。 介绍 本文主要解决如下几个问题: babel ...

  • Babel transform-runtime

    Babel @babel/plugin-transform-runtime 本节我们来学习 @babel/plu...

  • Babel transform-runtime

    Babel @babel/plugin-transform-runtime 本节我们来学习 @babel/plu...

  • React源码阅读

    React 源码阅读笔记 babel转JSX babel 更新器 React.CreateElement 传入三个...

网友评论

    本文标题:学习笔记 《Babel》

    本文链接:https://www.haomeiwen.com/subject/tyjpzttx.html