zoukankan      html  css  js  c++  java
  • es6学习---.babelrc文件

    babel是用来进行转码的,在不支持es6的环境下,需要将es6的语法转码成es5的语法格式,就用到了babel。

    .babelrc 文件的配置

    在项目的根目录下创建 .babelrc 文件

    文件包括两部分:

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

      "presets"用来设定转码的规则;plugins是需要安装的插件

    规则:

    #安装最新的转码规则
    $ npm install babel-preset-latest --save-dev
    
    #安装react的转码规则
    $ npm install babel-preset-react --save-dev
    
    #不同阶段的语法提案的转码规则(4选1)
    $ 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 文件中

      注意:该文件的编辑方式按照json文件的编辑习惯编辑。其中,不能使用 ' ' 代替 " "  。

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

    命令行转码工具:babel-cli

    一般的使用方法如下:

    #安装命令行工具到全局
    $ npm install -g babel-cli

    #安装命令行工具到项目中
    $ npm install --save-dev babel-cli

    改写package.json文件,将启动 babel-cli 的命令进行封装

    #封装命令,名称随意
    "scripts": { ... "babelCli":"babel src -d lib" },

    #安装好之后自动添加
    "devDependencies": {

      ...
      "babel-cli": "^6.26.0",
     }

    执行如下:

    $ npm run babelCli

    有关 babel-cli 的具体用法见阮老师的 ECMAScript6简介

    babel-node:提供一个REPL环境

    REPL 是交互式解析器 可以看这里 或自行百度 node的REPL。

    简单的理解,就是提供可以在命令行进行一些运算。

    babel-register:对文件自动转码

    babel-register会对require引入的后缀为 ‘.js’, '.jsx' , '.es' , '.es6' 的文件进行转码。不需要再使用转码命令进行转码。

    安装:

    $ npm install --save-dev babel-register

    引用:

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

     注意:1.必须先引入babel-register 再引入文件。 2.引入的方式只能通过 require 的方式引入。3.只在生产环境生效

     babel-polyfill:提供转换新API的插件

    有一些新的API,babel不会进行转化 --> IteratorGeneratorSetMapsProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码.安装了babel-polyfill之后就可以对这些新API进行转化。

    #安装:
    $ npm install --save-dev babel-polyfill

    #使用
    import('babel-polyfill');
    require('babel-polyfill');
  • 相关阅读:
    测试平台系列(38) 接入github第三方登录(上)
    测试平台系列(37) 运用装饰器给用例加上执行日志
    测试平台系列(36) 使用全局变量
    测试平台系列(35) 编写全局变量管理页面
    OCP 063中文考试题库(cuug内部资料)第16题
    OCP 063中文考试题库(cuug内部资料)第15题
    D. Strange Housing 题解(思维+染色)
    B. Strange Definition 题解(质因子分解+思维)
    F. Euclid's nightmare 题解(MST+思维)
    D. Fragmentation merging 题解(思维)
  • 原文地址:https://www.cnblogs.com/waterFowl/p/8990690.html
Copyright © 2011-2022 走看看