zoukankan      html  css  js  c++  java
  • 2-Babel

    一、什么是babel

    babel是一个源代码到源代码的转换器。比较广泛的用法就是可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaScript 引擎中。

    二、babel安装

    在控制台使用npm进行安装:

    npm install -g babel
    

    三、babel使用

    安装完babel后就可以使用babel编译ES6的代码了。

    第一步:对配置文件进行配置。

    Babel的配置文件是.babelrc,用于设置转码规则和插件,存放在项目的根目录下,基本格式如下:

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

    presets字段设定转码规则插件集,官方提供以下的规则集:

    babel-preset-latest
    babel-preset-es2017
    babel-preset-2016
    babel-preset-2015
    babel-preset-react
    babel-preset-stage-0
    babel-preset-stage-1
    babel-preset-stage-2
    babel-preset-stage-3
    

    plugins字段用于设置单独的插件,当需要单独配置某个插件的时候可以在此配置。

    第二步:转码

    //转码结果输出到标准输出
    babel example.js 
    // 转码结果写入一个文件 --out-file 或 -o 参数指定输出文件 
    babel example.js --out-file compiled.js 
    babel example.js -o compiled.js 
    // 整个目录转码 --out-dir 或 -d 参数指定输出目录 
    babel src --out-dir lib
    babel src -d lib 
    // -s 参数生成source map文件 
    babel src -d lib -s
    

    上面代码是在全局环境下,进行Babel转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。其中一个解决办法是将babel-cli安装在项目之中
    首先安装:

    npm install --save-dev babel-cli
    

    然后改写package.json

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

    这样就可以在转码的时候直接执行如下命令了:

    npm run build
    

    四:babel其他

    一:babel-node

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

    二:babel-register

    babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
    安装:

    npm install --save-dev babel-register
    

    使用时必须先加载

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

    需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

    三:babel-core

    如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。
    安装:

    npm install babel-core --save
    

    四:babel-polyfill

    Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
    举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
    安装:

    npm install --save babel-polyfill
    

    参考文献:http://www.ruanyifeng.com/blog/2016/01/babel.html

  • 相关阅读:
    杭电 2546 饭卡 (01背包问题)
    杭电2602 Bone Collector
    01背包问题的详细概述
    杭电1003 最大子串(第二次AC) 当作DP的训练吧
    杭电1087 Super Jumping! Jumping! Jumping!(初见DP)
    Virtualenv虚拟环境的创建、激活、及退出
    修改maven本地仓库路径
    PPT如何去除背景音乐(史上最全方案)
    NVIDIA显卡驱动安装步骤
    Python之NumPy(axis=0 与axis=1)区分
  • 原文地址:https://www.cnblogs.com/fengxuefei/p/6249718.html
Copyright © 2011-2022 走看看