zoukankan      html  css  js  c++  java
  • es6学习笔记(一)

    一. es6简介

    ECMAScript6.0是JavaScript语言的下一代标准,已经在2015年6月正式发布。又称ECMAScript 2015。根据计划,2017年6月将发布 ES2017。

    二. 支持度

    各大浏览器的最新版本,对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/

    Node.js是JavaScript语言的服务器运行环境,对es6的支持度比浏览器更高。通过Node,可以体验更多ES6的特性。

    Babel转码器可以将ES6代码转化为ES5代码,从而兼容不支持ES6的环境。

    // 转码前,使用了ES6新特性,箭头函数
    input.map(item => item + 1);
    // 转码后,转换为能在现有环境执行的普通函数
    input.map(function (item) {
      return item + 1;
    });

     三. 安装Babel

    1. 项目根目录node init

    2. 新建.babelrc文件

       该文件用来设置转码规则和插件,基本格式如下。

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

     presets字段设定转码规则,官方提供以下的规则集,你需要安装。

    # ES2015转码规则
    $ npm install --save-dev babel-preset-es2015
    
    # react转码规则
    $ npm install --save-dev babel-preset-react
    
    # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
    $ 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

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

    3. Babel提供babel-cli工具,用于命令行转码。

    $ npm install --global babel-cli
    

    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
    

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

    $ babel-node
    > (x => x * 2)(1)
    2
    

      

  • 相关阅读:
    【Win 10 应用开发】Toast通知激活应用——前台&后台
    MySQL深入理解
    mysql 索引中的USING BTREE 的意义
    关于PHP将对象数据写入日志的问题
    Golang学习笔记
    git flow 使用步骤
    git flow常用命令
    Nginx Log日志统计分析常用命令
    Nginx配置中的log_format用法梳理(设置详细的日志格式)
    回调函数的原理及PHP实例
  • 原文地址:https://www.cnblogs.com/zhaoliner/p/5841700.html
Copyright © 2011-2022 走看看