Babel转码器look at me~

转码器

什么是转编译

• 转编译器可以将一种编程语言的源代码转换成另一种编程语言的源代码。

适用场合

• 将一个版本的JavaScript编译成另一个版本的JavaScript

使用Babel转编译

命令行转码babel-cli

使用Babel需要配置Node.js包，便于安装所需要的依赖包。

• 创建Node.js项目

  #创建目录
  $ mkdir project_name  
  #切换目录
  $ cd project_name   
  #初始化为一个新项目，-y表示使用默认配置
  $ npm init -y       
  

• 配置Babel

  • 安装Babel的命令行界面 npm i babel-cli --global,使用全局安装

  • 从es6开始，Babel不进行任何默认转换，对于要应用的任何转换，必须进行预置条件然后安装对应插件,使用es6举例如下：

    • 预置条件在.babelrc文件中,此文件必须处于项目根目录并且内容是有效的JSON格式

      {
          "presets": ["es2015"]
      }
      

    • 安装对应插件

      $ npm i babel-preset-es2015 --save-dev 
      

• 转编译测试

  • 先在项目中创建一个src文件夹，然后在src下添加index.js文件，此时目录结构为：

  

  • 在index.js中添加 let a = 'hello'

  • 执行 babel src -d dist转编译源代码，babel src表示babel对src的内容进行操作，默认情况下，转编译后的代码被输出到终端，-d dist表示输出到dist目录下

  

• 避免重复执行 babel src -d dist操作

  • 以上的转编译测试是在全局环境下进行的，但是为了避免项目对环境产生依赖，可以使用 npm i babel-cli --save-dev命令，此命令将babel-cli安装在项目之中，可以支持不同项目使用不同版本的Babel

  • 配置NPM脚本执行任务，在package.json文件中找到特定的脚本部分，通过名称指定可执行的脚本部分，如图：

  

  • 执行 npm run babel

babel-node

• babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境（Read-eval-print-loop 交互式解析器，可以定义和运行变量、函数、对象）。

• 进入REPPL环境

  #进入REPL环境执行代码
  $ babel-node
  > (x => x * 2)(1)
  2
  
  #直接运行ES6脚本
  $ babel-node es6.js
  

  使用babel-node代替node的话，脚本就不需要进行转码处理。

babel-register

babel-register模块改写了require命令，为其加上了一个钩子。每当使用require加载后缀为.js、.jsx、.es、.es6文件时，就会先用Babel进行转码。

$ npm i babel-register --save-dev

require("babel-register");
require("./index.js")

它只会对require加载的文件进行转码，不会转码当前文件，由于是实时转码，只适用于开发环境。

babel-polyfill

Babel默认只转换新的JavaScript句法，不转换新的API。想要使用新的API，就要用babel-polyfill。

$ npm i babel-polyfill --save

在脚本头部加入以下代码：

import 'babel-polyfill'
//或者
require('babel-polyfill')

阅读《ES6标准入门（第3版）》读书笔记