美文网首页
Babel 使用指南阅读笔记

Babel 使用指南阅读笔记

作者: anshi | 来源:发表于2017-08-11 10:39 被阅读0次

本文内容来自Babel用户手册

babel-cli

$ babel test.js  //将编译后的结果直接输出在终端
$ babel test.js --out--file a.js //将编译结果输出给a.js

//或者我们想编译整个文件夹并输出
$ babel src --out--dir dist

当然,一般我们都将命令写在 package.json里的scripts条目里。

babel-register

这种方法依靠引入文件来使用babel(?)
再原有项目中新建register.js

require("babel-register");
require("./test.js");  //项目入口文件

上述代码先把 Babel 注册到 Node 的模块系统中,然后开始编译 require 的所有文件。

babel-node

没有babel-node这个模块...使用这种方式前需要安装 babel-cle。
这种方式在运行的时候编译,故调用时也不使用node test.js

$ node test.js //划掉 
$ babel-node test.js

babel-core

如果你想使用编写js的形式来使用babel的话...
???说实话,并没有理解...

配置babel

.babelrc

在项目根路径新建.babelrc,并写入如下内容

{
  "presets": [],
  "plugins": []
}

~说实话你或许更希望能直接在 package.json 里就把配置给解决了~

babel-preset-es2015

你最大的需求可能是将 ES2015(ES6) 编译成ES5。

babel-preset-stage-x

JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。(例如 async/await)
这个流程分为 5个阶段(0~4)。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳。

以下是4 个不同阶段的(打包的)预设:

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

值得一提的是 任一阶段的预设都依赖在其之后阶段的预设,例如 stage-1 依赖 stage-2 而后者又 stage-3。
好在使用的时候直接选择安装哪一阶段的的预设就好。同时也要在.babelrc写明预设的内容。

{
  "presets":[
    "es2015",
    "stage-1"
  ],
  "plugins": []
}

所以我如何确定自己该使用...哪个阶段的预设?
各个stage的区别
官方文档

执行babel生成的代码

如果我们只是使用新语法(旧语法仍然可以实现的),那确实足够,但是如果你使用了的新的API,那可能要伤脑筋了。
为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。 简单地说,polyfill 即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs。
Babel 用了优秀的 core-js 用作 polyfill。
要使用 Babel polyfill,首先用 npm 安装它:

$ npm install --save babel-polyfill

然后只需要在文件顶部导入 polyfill 就可以了。

基于环境自定义babel

  {
    "presets": ["es2015"],
    "plugins": [],
+   "env": {
+     "development": {
+       "plugins": [...]
+     },
+     "production": {
+       "plugins": [...]
+     }
    }
  }

babel插件手册

略难 改天...心情平静些再阅读吧。

相关文章

  • Babel 使用指南阅读笔记

    本文内容来自Babel用户手册 babel-cli 当然,一般我们都将命令写在 package.json里的scr...

  • React源码阅读

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

  • 如何配置 babel

    在此之前你需要首先了解一下什么是babel,以及babel的使用指南;如果你需要其他babel的版本,还请参考[h...

  • 浅析 webpack 打包流程(原理) - 案例 demo

    本地新建一个项目文件夹并初始化: 本地安装需要的包:【babel 使用指南】[https://www.babelj...

  • babel笔记

    babel笔记 .babelrc配置文件 presets字段设定转码规则# 最新转码规则$ npm install...

  • Babel了解

    本文为本人略读官网文档后的大略笔记,实在不适合他人阅读 前言 Babel是一个JavaScript编译器(用于转换...

  • 额外 markdown 语法支持 - 有道云笔记

    有道云笔记内置Markdown编辑器和使用指南,非技术类笔记用户,千万不要被「标记」、「语言」吓到,Markdow...

  • babel学习笔记

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

  • Babel 学习笔记

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

  • 学习笔记 《Babel》

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

网友评论

      本文标题:Babel 使用指南阅读笔记

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