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

  • 相关阅读:
    POJ 3630 Phone List/POJ 1056 【字典树】
    HDU 1074 Doing Homework【状态压缩DP】
    POJ 1077 Eight【八数码问题】
    状态压缩 POJ 1185 炮兵阵地【状态压缩DP】
    POJ 1806 Manhattan 2025
    POJ 3667 Hotel【经典的线段树】
    状态压缩 POJ 3254 Corn Fields【dp 状态压缩】
    ZOJ 3468 Dice War【PD求概率】
    POJ 2479 Maximum sum【求两个不重叠的连续子串的最大和】
    POJ 3735 Training little cats【矩阵的快速求幂】
  • 原文地址:https://www.cnblogs.com/fengxuefei/p/6249718.html
Copyright © 2011-2022 走看看