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. Android Studio 学习笔记(二):布局简介和xmlns说明

    初学Android Studio,是在b站看的教程视频,这里的笔记也是以其为基础的,个人强烈安利: [天哥]Android开发视频教程最新版 Android Studio开发 Android 布局简介 ...

  2. 20200220--python学习第13天

    今日内容 作业题(21题) 推导式 装饰器 模块[可选] 内容回顾 1.函数 a.参数 def func(a1,a2):pass def func(a1,a2=None):pass 默认参数推荐使用不 ...

  3. Nexus 安装运维手册

    1. Nexus 安装与配置 1.1 下载Nexus 登录https://www.sonatype.com/download-oss-sonatype,下载最新的Nexus版本. 我这里使用的是nex ...

  4. vi/vim编辑器操作梳理

    1. vi/vim编辑器详细使用讲解 1.1 vi/vim编辑器的3种模式 1.2 vi/vim编辑器操作说明 参数/命令/模式 说明 ###普通模式   :set nu  显示行号 :set non ...

  5. [CSS]三大特性之一继承性、层叠性、优先级

    <style> div { color: red; font-size: 30px; {#background: #0066ff;#} } </style> <!-- 1 ...

  6. .NET代码混淆工具NET Reactor - 初学者系列-学习者系列文章

    这几天无事,除了看书,然后就倒腾原来的代码.想起.NET的代码混淆工具软件,所以今天就讲讲这个.NET代码混淆工具. .NET代码混淆工具软件,以前有了解和找过,但是当时需求不大,所以找了下就搁置了. ...

  7. Mysql 保存emoji表情报错

    保存emoji表情错误 首先错误表现,抛出业务层报错之外,根源的数据库错误是: sql 错误码 1366 字符集相关错误. uncategorized SQLException; SQL state ...

  8. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  9. MySQL存储过程和游标

    一.存储过程 什么是存储过程,为什么要使用存储过程以及如何使用存储过程,并且介绍创建和使用存储过程的基本语法. 什么是存储过程: 存储过程可以说是一个记录集,它是由一些T-SQL语句组成的代码块,这些 ...

  10. DolphinScheduler1.2.1源码分析

    DolphinScheduler在2020年2月24日发布了新版本1.2.1,从版本号就可以看出,这是一个小版本.主要涉及BUG修复.功能增强.新特性三个方面,我们会根据其发布内容,做简要的源码分析. ...