1).打开配置文件".babelrc",配置插件集,代码如下:

{

"presets":["latest"]

}

2).安装babel插件集,打开命令窗口,输入如下命令:

npm install babel-preset-latest

3).开发者需要注意的是,babel只对ES6的新语法进行转码,不会转换成新的API,比如不支持转码Object.assign函数,如果开发中用到的新的API,可以使用babel-polyfill添加垫片。安装垫片代码如下,

npm install babel-polyfill

4).安装成功之后,在入口脚本文件头部加入垫片,代码如下

import “babel-polyfill”;

5).如果在Node.js环境里运行javascript文件,除了可以使用命令在运行前进行转码外,也可以使用钩子在运行时进行转码,创建server.js 文件,输入如下代码

import "http"

console.log("Hello world");

6).打开命令窗口,输入命令,运行server.js,命令如下:

node server.js

因为Node.js 不支持es6的important语法,会出现报错信息"Unexpected  token  import".

7).打开命令行窗口,安装钩子,命令如下:

npm install babel-register

8).创建hook.js 文件,注册钩子,代码如下:

require("babel-register");

require("./server");

9).运行钩子文件,打开命令行窗口,输入如下命令:

node  hook.js

成功打印信息  "Hello  World"

BABEL官网提供了一个在线转换的页面https://babeljs.io/repl/,可以实时查看es6转码成es5的格式,还可以配置不同的插件以及插件集,对学习es6以及babel非常有帮助。

使用babel插件集的更多相关文章

  1. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  2. [转] 以 async/await 为例,说明 babel 插件怎么搭

    你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...

  3. 从AST编译解析谈到写babel插件

    之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...

  4. 开发一个简单的babel插件

    前言 对于前端开发而言,babel肯定是再熟悉不过了,工作中肯定会用到.除了用作转换es6和jsx的工具之外,个人感觉babel基于抽象语法树的插件机制,给我们提供了更多的可能.关于babel相关概念 ...

  5. Xcode 插件集:xTextHandler

    本文转载至 http://www.tuicool.com/articles/zIFvQn7 基于 Xcode Source Editor Extension 做了一个插件集,叫做 xTextHandl ...

  6. 快速写一个babel插件

    es6/7/8的出现,给我们带来了很多方便,但是浏览器并不怎么支持,目前chrome应该是支持率最高的,所以为了兼容我们只能把代码转成es5,这应该算是我们最初使用babel的一个缘由,随着业务的开发 ...

  7. (6)webpack使用babel插件的使用

    为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使 ...

  8. (数据科学学习手札95)elyra——jupyter lab平台最强插件集

    本文示例文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 jupyter lab是我最喜欢的编辑器,在过往 ...

  9. ThreeJS系列2_effect插件集简介( 3d, vr等 )

    ThreeJS系列2_effect插件集简介( 3d, vr等 ) ThreeJS 官方案例中有一些 js库 可以替代 render 将场景中的物质变换为其他效果的物质 目录 ThreeJS系列2_e ...

随机推荐

  1. linux整个日志目录查询记录

    在linux下面需要查看整个目录的日志,搜索用户的一个行为.因为不知道具体是那一天,一个个的查询也可以,但是太麻烦.可以用过下面的命令来实现: rep -iRl  "关键字" ./ ...

  2. sql server2008安装时提示重启计算机失败怎么办?

    在键盘上按下组合键[Win]+[R],调出运行窗口. 在窗口中输入“regedit”,点击确定,打开注册表管理界面. 在注册表左侧目录栏中找到如下位置:“HKEY_LOCAL_MACHINE\SYST ...

  3. Oracle Merge Into的用法详解

    1.    MERGE INTO 的用途         MERGE INTO 是Oracle 9i以后才出现的新的功能.那这个功能 是什么呢?         简单来说,就是:“有则更新,无则插入” ...

  4. kettle 合并记录

    转自: http://blog.itpub.net/post/37422/464323 看到别人的脚本用到 合并记录 步骤,学下下. 该步骤用于将两个不同来源的数据合并,这两个来源的数据分别为旧数据和 ...

  5. [翻译] VLDContextSheet

    VLDContextSheet 效果: A clone of the Pinterest iOS app context menu. 复制了Pinterest应用的菜单效果. Example Usag ...

  6. [翻译] SVProgressHUD

    SVProgressHUD https://github.com/TransitApp/SVProgressHUD SVProgressHUD is a clean and easy-to-use H ...

  7. CSV输入输出

    读取csv文件: import csv cf = open('D:\pywe.csv','rb') cf.readline() #读取标题行,光标移动到下一行(相当于调过标题行) for l in c ...

  8. MP4

  9. 点开无线显示"已连接 安全",但是点击下面无线图标却显示"无法连接internet",解决方案

    管理员权限运行“命令提示符” 输入:netsh winsock reset 然后重启电脑即可

  10. Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.

    System.Data.OracleClient 已经过时了.微软不再支持它. 因此,我建议你为. NET 使用Oracle数据提供程序:ODP.Net. 你可以从以下位置下载: 版本:Release ...