babel:将浏览器不支持的ES6语法转为javascript

查看node是否安装:

    npm -v
node -v

实例演示:
在桌面新建part5目录
在cmd命令行中

    cd desktop
cd part5

安装babel:
初始化package.json文件:描述当前项目信息,包括依赖等

    npm init

安装babel cli

    npm install --save-dev babel-cli

在package.json的"script"下添加一句:

    "build": "babel entry.js"

创建entry.js文件,写es6代码用于测试

执行

npm run build

全局安装babel-cli

    npm i babel-cli -g

安装babel-preset-env

    npm i -D babel-preset-env

创建配置文件,告诉babel用什么规则来编译文件.babelrc

{
"presets": [
[
"env",
{
"targets":{
"browsers":["last 1 version"]
}
}
]
]
}

修改packsge.json
-o 输出到文件
-w 始终处于监听状态

"build": "babel entry.js -o index.js -w"

通过babel插件体验新特性
安装插件

npm i -D babel-plugin-transform-class-properties

修改.babelrc文件

{
"presets": [
[
"env",
{
"targets":{
"browsers":["last 1 version"]
}
}
]
],
"plugins":["transform-class-properties"]
}

babel环境安装与编译的更多相关文章

  1. 安装maven编译环境

    安装maven编译环境 1.默认已经装好yum并配置好yum源(推荐使用163yum源) 2.安装JDK 3.安装相关依赖环境(root用户登陆) yum install -y cmake lzo-d ...

  2. CentOS离线安装GCC编译环境

    gcc编译环境rpm下载 安装相关的rpm包,具体版本可能随时间变化而变化,可以去以下地址下载: 重庆大学镜像:http://b.mirrors.lanunion.org/CentOS/中国科学技术大 ...

  3. centos6.5环境源码编译安装mysql5.6.34

    centos6.5环境源码编译安装mysql5.6.34 源码下载地址http://dev.mysql.com/downloads/mysql/5.6.html#downloads 选择Generic ...

  4. WebStorm 8.0安装LESS编译环境的教程

    WebStorm是一个非常棒的Web前端开发编辑器,被程序猿们成为“最智能的JavaScript IDE”.对HTML5.Bootstrap框架.Node.js等都有完美支持.目前最新版本为WebSt ...

  5. 【转】Android 4.3源码的下载和编译环境的安装及编译

    原文网址:http://jingyan.baidu.com/article/c85b7a641200e0003bac95a3.html  告诉windows用户一个不好的消息,windows环境下没法 ...

  6. Linux Object-C 编译环境安装

    sudo apt-get install gnustep sudo apt-get install gnustep-devel sudo apt-get install gobjc . /usr/sh ...

  7. Linux本地yum源配置以及使用yum源安装gcc编译环境

    本文档是图文安装本地yum源的教程,以安装gcc编译环境为例. 适用范围:所有的cetos,红帽,fedroa版本 适用人群:有一点linux基础的小白 范例系统版本:CentOS Linux rel ...

  8. Tesseract环境搭建及编译安装

    Tesseract环境搭建及编译安装 Tesseract源码都是C++源码:对于不咋会C++的人来说,这真是...虽然说语言有相通性,但是...哎!!!!! 分享出来,也希望对大家有所帮助. 环境:w ...

  9. android编译环境安装

    Android 编译环境安装 安装 Java 6 安装 Java 6 安装依赖包 (Ubuntu 12.04) $ sudo apt-get install git gnupg flex bison ...

随机推荐

  1. 使用脚本+kafka自带命令行工具 统计数据写入kafka速率

    思路 每隔一段时间(比如说10秒)统计一次某topic的所有partition的最大offset值之和,这便是该topic的message总数. 然后除以间隔时间就可以粗略但方便得出 某topic的数 ...

  2. HDU_1176_DP

    http://acm.hdu.edu.cn/showproblem.php?pid=1176 简单dp,转换后跟上一题数塔一样,注意每秒只能移动一格,还有在边缘的情况. #include<ios ...

  3. MySQL8.0关系数据库基础教程(三)-select语句详解

    1 查询指定字段 在 employee 表找出所有员工的姓名.性别和电子邮箱. SELECT 表示查询,随后列出需要返回的字段,字段间逗号分隔 FROM 表示要从哪个表中进行查询 分号为语句结束符 这 ...

  4. HTML5与HTML4的区别-----通用的排版结构

    一个网页通常分为:头部,主体内容和脚部三个部分,当然也有其他更细的划分方法. 以移动端为例, 当给一个设计图,我通常使用一下结构: <div  class="container&quo ...

  5. html标签学习入门 随笔

    Html学习入门    随笔1: HTML 标题 HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. 标题仅用于标题文本  不应该被使用在加粗字 ...

  6. docker pull 时报错Create more free space in thin pool or use dm.min_free_space option to change behavior

    docker pull 时报错: failed to register layer: devmapper: Thin Pool has 107394 free data blocks which is ...

  7. Danganronpa 水题。

    Danganronpa Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  8. js垃圾回收与内存泄漏

    js垃圾回收机制 概念: javascript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中的使用的内存.而在C和C++之类的语言中,开发人员的一项基本任务就是手动跟踪内存的使用情况 ...

  9. 关于OFFICE 文件在线编辑dsoframer

    下载dsoframer.ocx 系统为32位时:拷贝 dsoframer.ocx  到c:\windows\system32\dsoframer.ocx打开cmd命令行注册  regsvr32.exe ...

  10. c# 匿名方法(函数) 匿名委托 内置泛型委托 lamada

    匿名方法:通过匿名委托 .lamada表达式定义的函数具体操作并复制给委托类型: 匿名委托:委托的一种简单化声明方式通过delegate关键字声明: 内置泛型委托:系统已经内置的委托类型主要是不带返回 ...