Babel转码器

Babel转码器

• 将ES6转换为ES5的转码器，使代码在现在环境中执行

• 需要在项目目录中进行安装

  • npm i @babel/core -s -d

配置文件.babelrc

• 使用babel的第一步，就是在项目根目录中配置此文件

• 用来设置转码规则和插件

• 按需安装规则集和插件，并将其加入.babelrc

  • {
        "preset":[],
        "plugins":[]
    }

命令行转码

• Babel提供命令行工具@babel/cli,用于命令行转码

• 安装

  • npm i --save-dev @babel/cli

• 使用

  • #将指定文件直接转码输出
    npx babel example.js
    ​
    #将指定文件转码，结果写入另一文件
    # --out-file 或 -o 参数指定输出文件
    npx babel example.js --out-file compiled.js
    # 或者
    npx babel example.js -o compiled.js
    ​
    #整个目录转码
    #--out-dir 或 -d参数指定输出目录
    npx babel src --out-dir lib
    #或
    npx babel src -d lib
    ​
    #-s参数生成source map文件
    npx babel src -d lib -s

babel-node

• 支持node的REPL环境的所有功能，且可以直接运行ES6代码

  • npm i --save-dev @babel/node
    # 执行babel-node进入REPL环境
    npm babel-node
    #直接运行ES6脚本
    npm babel-node es6.js

@babel/register 模块

• 改写require命令，每当使用其加载加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。

  • npm i -s-d @babel/register

• 只对引入的文件转码，并不会对当前文件转码

• 写在require引入文件之前

babel API

• 当使用Babel的api进行转码，需要使用@babel/core模块

• require引入@babel/core模块时返回一个对象，此对象中的api可以用来转码

  var babel = require('@babel/core');

• transform

  • 第一个参数是字符串，表示需要转码的es6代码

  • 第二个参数是转换的配置对象

  • 返回值中包含：map,code,ast

  • code为转换后的代码

  babel.transform()

@babel/polyfill

• babel默认只转换es6中的新句法，不转换其新的api

  • 安装

    npm install --save-dev @babel/polyfill

  • 使用，在脚本文件头部

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

用于浏览器环境

• Babel 也可以用于浏览器环境，使用@babel/standalone模块提供的浏览器版本，将其插入网页

  • <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    //或者下载后按路径导入
    <script type='text/babel'>
    </script>