Babel 入门指南-阿里云开发者社区

开发者社区> 文艺小青年> 正文

Babel 入门指南

简介:
+关注继续查看

Babel 入门指南

babel

​️ 注意:

Babel 可以与很多构建工具(如 BrowserifyGruntGulp 等)进行集成。由于本教程选择 Webpack ,所以只讲解与 Webpack 的集成。想了解如何与其它工具集成,请参考:官方文档 - installation

简介

Babel 是一个通用的多用途 JavaScript 编译器。

Babel 能做什么?

  • Babel 通过语法转换来支持最新版本的 JavaScript (ES6),而不用等待浏览器的支持。

  • Babel 可以转换 React 的 JSX 语法和删除类型注释。

  • Babel 是由插件构建的。因此,你可以根据自己的需要订制。

  • 支持 source map ,所以您可以轻松调试您编译的代码。

Babel 不能做什么?

  • Babel 只转换语法(如箭头函数),不支持新的全局变量。但是,您可以使用 babel-polyfill 来辅助支持。

安装 Babel

babel-cli

babel-cli 是 Babel 的命令行工具。

安装

# 本地安装
$ npm install --save-dev babel-cli
# 全局安装
$ npm install --global babel-cli

用法

# 将编译后的结果直接输出至终端
$ babel example.js

# 将结果写入到指定的文件
$ babel example.js --out-file compiled.js
$ babel example.js -o compiled.js

# 将一个目录整个编译成一个新的目录
$ babel src --out-dir lib
$ babel src -d lib

与 package.json 集成

​ 提示:

建议使用本地安装方式安装 babel-cli 。

原因在与:

  1. 在同一台机器上的不同项目或许会依赖不同版本的 Babel 并允许你有选择的更新。
  2. 这意味着你对工作环境没有隐式依赖,这让你的项目有很好的可移植性并且易于安装。

本地安装 babel-cli ,直接使用 babel 命令将无法识别。你可以选在在 package.json 文件的  scripts 属性中定义命令。npm会自动找到本地安装的库。

{
  "scripts": {
    "build": "babel src -d lib"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
}

现在可以在终端里执行命令:

$ npm run build

​ 示例DEMO01: (SOURCE)

说明:

示例的上一级目录 codes/chapter04/babel 已经配好了配置文件。

在 codes/chapter04/babel 路径下执行命令:

$ npm install
$ npm run demo01

会生成一个 dist/demo01 目录,其中就是被转码后的文件。

babel-node

babel-cli 工具自带一个 babel-node 命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。

它不用单独安装,而是随 babel-cli 一起安装。然后,执行 babel-node 就进入 PEPL 环境。

然后用 babel-node 来替代 node 运行所有的代码:

$ babel-node
> (x => x * 2)(1)
2

babel-node 命令可以直接运行ES6脚本:

$ babel-node example.js

如果用 npm 的话只需要这样做:

{
  "scripts": {
    "script-name": "babel-node script.js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
}

然后,执行命令:

$ npm run babel-node

babel-register

下一个常用的运行 Babel 的方法是通过 babel-register。这种方法只需要引入文件就可以运行 Babel,或许能更好地融入你的项目设置。

​️ 注意:

这种方法并不适合正式产品环境使用。 直接部署用此方式编译的代码不是好的做法。 在部署之前预先编译会更好。

不过用在构建脚本或是其他本地运行的脚本中是非常合适的。

安装

$ npm install --save-dev babel-register

使用

  1. 创建 index.js 文件:
console.log("Hello world!");

这是,使用 node index.js 来运行它是不会使用 Babel 来编译的。所以我们需要设置 babel-register。.

  1. 创建 register.js 文件:
require("babel-register");
require("./index.js");

这样做可以把 Babel 注册到 Node 的模块系统中并开始编译其中 require 的所有文件。

  1. 执行命令

现在我们可以使用 register.js 来代替 node index.js 来运行了。

$ node register.js

需要注意的是:你不能在你要编译的文件内同时注册 Babel,因为 node 会在 Babel 编译它之前就将它执行了。

​ 示例DEMO02: (SOURCE)

说明:

示例的上一级目录 codes/chapter04/babel 已经配好了配置文件。

在 codes/chapter04/babel 路径下执行命令:

$ npm install
$ npm run demo02

控制台会打印如下内容:

> node demo02/register.js

Hello world!

babel-core

如果你需要以编程的方式来使用 Babel,可以使用 babel-core 这个包。

安装

$ npm install babel-core

使用

在代码中引入 babel-core

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

编译 API

# 如果是字符串形式的 JavaScript 代码,可以使用 transform 编译
babel.transform("code();", options);
// => { code, map, ast }

# 如果是文件的话,异步编译使用 transformFile
babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});
# 如果是文件的话,同步编译使用 transformFileSync
babel.transformFileSync("filename.js", options);
// => { code, map, ast }

# 要是已经有一个 Babel AST(抽象语法树)了就可以直接从 AST 进行转换
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

与 webpack 集成

​ 提示:

本教程由于选择的编译工具为 webpack ,所以这里只介绍与 webpack 的集成。

实际上,Babel 还可以与其它许多工具集成,更多内容参考:官方文档 - setup

安装

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

配置

在 Chapter03 的 Webpack 资源管理 一文中,介绍过使用 babel-loader 来处理 React 语法。

在 webpack.config.js 配置如下:

// 关于模块配置
module: {

  // 模块规则(配置 loader、解析器等选项)
  rules: [
    {
      // 语义解释器,将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
      test: /\.jsx?$/,
      include: path.resolve(__dirname, "app"),
      loader: "babel-loader",
    },
  ]
},

​ 示例

chapter03-jigsaw: (SOURCE)

chapter04-jigsaw: (SOURCE)

说明:

chapter04-jigsaw 和 chapter03-jigsaw 相比,多了一个 .babelrc 文件。它其实是将 chapter03-jigsaw 中的 webpack.common.js 文件里的 babel-loader 的配置移入了 .babelrc 文件。

这两个代码目录的执行结果完全相同。

执行方法:

$ npm install
# 开发环境 - 本地启动一个访问地址为 localhost:9000 的 web app
$ npm run dev
# 开发环境 - 生成一个 dist 目录,其中打包了所有资源文件,在浏览器打开 index.html,可以看到和开发环境差不多的展示。
$ npm run prod
# 清除输出目录 dist
$ npm run clean

配置 Babel

​ 提示:

由于 Babel 是一个非常灵活的通用编译器,因此默认情况下它反而什么都不做。

你需要通过配置文件,明确地告诉 Babel 应该要做什么。

.babelrc

.babelrc 文件是 Babel 的默认配置文件。

.babelrc 文件的内容形式就是序列化的 JSON。

该文件用来设置转码规则(presets)和插件(plugins),基本格式如下:

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

转码规则(preset)

转码规则可以告诉 Babel 去处理什么语法。

常见的转码规则有:

  • babel-preset-es2015

这是 ES2015(最新版本的 JavaScript 标准,也叫做 ES6)的转码规则。使用它后,Babel 可以将 ES6 语法转码为普通 JavaScript(即 ES5) 语法。

  • babel-preset-react

这是 React 的转码规则。使用它后,Babel 可以将 React 语法转码为普通 JavaScript 语法。

  • babel-preset-stage-x

这是 ES7 不同阶段语法提案的转码规则。使用它后,Babel 可以将 ES7 不同阶段语法转码为普通 JavaScript 语法。

​ 提示:

JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。

这个流程分为 5(0-4)个阶段。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳。以下是4 个不同阶段的(打包的)预设:

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

stage-4 预设是不存在的因为它就是上面的 es2015 预设。

以上每种预设都依赖于紧随的后期阶段预设。例如,babel-preset-stage-1 依赖 babel-preset-stage-2,后者又依赖babel-preset-stage-3

安装

# es2015(即ES6)语法转码规则
$ npm install --save-dev babel-preset-es2015

# react 语法转码规则
$ npm install --save-dev babel-preset-react

# stage 是指 ES7 不同阶段的语法转码规则,选装一个即可
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

使用

安装完后,需要在配置文件 .babelrc 中引入项目中实际需要的预设转码规则,让 Babel 得以知道规则。

形式如下:

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

插件(plugins)

插件是 Babel 的核心。

Babel 插件大致分为三类:

  • 转码插件

有很多种插件:将ES6 / ES2015转换为ES5,转换为ES3,minification,JSX,flow,实验功能等等。

  • 语法插件

这些只是使转码插件能够解析某些功能(转码插件已经包含语法插件,因此这两个功能你都不需要):babel-plugin-syntax-x

  • 助手

这些主要用于各种插件内部使用:babel-helper-x

更多插件请在 npm 搜索(真的好多!)

更详细介绍请参考:官方文档 - 插件

在其它工具中配置

​​ 提示:

除了在 .babelrc 文件中定义 Babel 配置。实际上,还可以在其他工具中对其进行配置。

在 package.json 中配置

可以在 package.json 文件的 babel 属性中配置 Babel 规则。

配置方法与 .babelrc 文件完全相同。

形式如下:

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

在 webpack.config.js 中配置

可以在 webpack.config.js 文件配置 babel-loader 时,直接在 options 属性中配置 Babel 规则。

形式如下:

{
  test: /\.jsx?$/,
  include: path.resolve(__dirname, "app"),
  exclude: /node_modules/,
  loader: "babel-loader",
  options: {
    presets: [
      [
        "es2015",
        {
          "modules": false
        }
      ],
      "react"
    ],
    plugins: [
      "syntax-dynamic-import",  // 动态导入插件
      "react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR)
    ]
  },
}

执行 Babel 生成的代码

即便你已经用 Babel 编译了你的代码,但这还不算完。

babel-polyfill

Babel 几乎可以编译所有新潮的 JavaScript 语法,但对于 APIs 来说却并非如此。

比方说,下列含有箭头函数的需要编译的代码:

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

最终会变成这样:

function addAll() {
  return Array.from(arguments).reduce(function(a, b) {
    return a + b;
  });
}

然而,它依然无法随处可用。因为并非所有的 JavaScript 环境都支持 Array.from

为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。 简单地说,polyfill 即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs,Array.from 就是一个例子。

Babel 提供了 babel-polyfill 来支持 polyfill 。

安装

$ npm install --save babel-polyfill

使用

然后,只需要在文件顶部导入 babel-polyfill 就可以了:

import "babel-polyfill";

babel-runtime

babel-runtime 与 polyfill 类似,不同之处在于它不修改全局范围,并且与 babel-plugin-transform-runtime(通常在库/插件代码中)一起使用。

为了实现 ECMAScript 规范的细节,Babel 会使用“助手”方法来保持生成代码的整洁。

由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部,因此你可以把它们统一移动到一个单一的“运行时(runtime)”中去。

通过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime

然后更新 .babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-es2015-classes"
  ]
}

现在,Babel 会把这样的代码:

class Foo {
  method() {}
}

编译成:

import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";

let Foo = function () {
  function Foo() {
    _classCallCheck(this, Foo);
  }

  _createClass(Foo, [{
    key: "method",
    value: function method() {}
  }]);

  return Foo;
}();

这样就不需要把 _classCallCheck 和 _createClass 这两个助手方法放进每一个需要的文件里去了。


本文转自静默虚空博客园博客,原文链接:http://www.cnblogs.com/jingmoxukong/p/7028572.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10015 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26776 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10880 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2500 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9154 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7456 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7340 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22364 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4488 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载