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. 网络文学带动的IP热

    网络文学从最初被人诟病不入流到现今直接带动整个网络文学产业链发展以及IP热,其发展历程如何?现今布局如何?以下做简单概括. 下图为艾瑞PC指数文学网站排名,由图可看出晋江原创网排名首位. 晋江隶属盛大 ...

  2. restful知识点之三restframework认证-->权限-->频率

    认证.权限.频率是层层递进的关系 权限业务时认证+权限 频率业务时:认证+权限+频率 局部认证方式 from django.conf.urls import url,include from djan ...

  3. 【Yii系列】Yii2.0的安装与调试

    接上一节的话,我们最终选择了Yii框架作为我们的主要开发框架,今天,我就和大伙来聊聊如何安装与调试Yii2.0,以及后续会和大伙聊聊如何在Yii2.0上快速撸代码. Yii2.0的安装 好的,Comp ...

  4. Docker-容器数据卷

    docker容器数据卷相当于外置的移动硬盘 docker容器数据卷主要功能是:容器的持久化.容器间继承+共享数据 特点: (1)数据卷可以容器之间共享或重用数据 (2)卷中更改可以直接生效 (3)数据 ...

  5. js之yeild

    1.万恶的回调 对前端工程师来说,异步回调是再熟悉不过了,浏览器中的各种交互逻辑都是通过事件回调实现的,前端逻辑越来越复杂,导致回调函数越来越多,同时 nodejs 的流行也让 javascript ...

  6. js 图形化工作流设计器

        最近比较闲,打算开发一个用js 写的 图形化工作流设计器,附上草图一张,要看运行效果请下载附件,这个版本还在开发中,以后会持续更新,直到满意为止.上面的列子虽然变形,我还是贴出来了,给大家一个 ...

  7. 关于Unity3d的世界空间和本地空间的一点思考

    最近才开始学Unity3d,被这个本地空间和世界空间搞得有点晕头转向的.于是花了一点时间随便写了一点代码加深理解.代码如下: public class MoveX : MonoBehaviour { ...

  8. [翻译] TWRPickerSlider

    TWRPickerSlider https://github.com/chasseurmic/TWRPickerSlider Usage Add the dependency to your Podf ...

  9. Exchange 2016 CU6 安装后,发生错误 出现意外错误,无法处理您的请求

    公司的Exchange2016环境准备上线了,今天owa打不开了.出现如下图的错误,更多详细信息没有截图,但最关键的一句记下来了. X-OWA-Error Microsoft.Exchange.Dia ...

  10. The Shapes of CSS(css的形状)

    All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in ...