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. Idea使用插件实现逆向工程搭建SpringBoot项目

    之前写SpringBoot项目,每次都要手动去写实体类.dao层啥的,尤其是数据库表字段特别多的时候,特别麻烦.然后很多小伙伴都会用逆向工程来自动生成这些类,省去许多没必要的代码量,但是Mybatis ...

  2. Codeforces_828

    A.模拟,注意单人的时候判断顺序. #include<bits/stdc++.h> using namespace std; int n,a,b; int main() { ios::sy ...

  3. spring cloud微服务快速教程之(七) Spring Cloud Alibaba--nacos(一)、服务注册发现

    0.前言 什么是Spring Cloud Alibaba? Spring Cloud Alibaba 是阿里开源的,致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便 ...

  4. VFP 的 CursorAdapter 相关

    VFP 的 CursorAdapter 是在VFP 8 中增加的最重要的新功能,它提供了一种采用统一接口的方式来访问远程数据源. 现在正值新冠肺炎期间,闲着也是闲着,在整理原理的资料时,发现十多年前的 ...

  5. 数据算法 --hadoop/spark数据处理技巧 --(9.基于内容的电影推荐 10. 使用马尔科夫模型的智能邮件营销)

    九.基于内容的电影推荐 在基于内容的推荐系统中,我们得到的关于内容的信息越多,算法就会越复杂(设计的变量更多),不过推荐也会更准确,更合理. 本次基于评分,提供一个3阶段的MR解决方案来实现电影推荐. ...

  6. JS获取最近三个月日期范围

    function getLast3Month() { var now = new Date(); var year = now.getFullYear(); var month = now.getMo ...

  7. C# 获取键盘钩子,屏蔽键盘按键

    static int hHook = 0; public delegate int HookProc(int nCode, int wParam, IntPtr lParam); //LowLevel ...

  8. WinFrom 在Devexpress里用GridControl和DataNavigtor进行分页

    1,分页嘛先要有个SQL 程序才能写下去 先提供下SQL的思路,对于分页的SQL我之前帖子有介绍,就不一一介绍了 select top pageSize * --显示数量 from (select r ...

  9. docker配置仓库源

    1 修改docker配置文件 下面的内网ip改成公司的私有仓库地址 后面两个建议保留(一个是国内加速源,一个是国外仓库.这两个删了也是可以的) 2 重启docker服务 # vim /etc/dock ...

  10. C# aggregateexception flatten innerexceptions

    static void AggregateExceptionsDemo() { var task1 = Task.Factory.StartNew(() => { var child1 = Ta ...