1,安装好node(需要使用npm包管理工具)

2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json

3,本地安装bable npm install --save-dev babel-cli (如需卸载之前的babel使用命令  npm uninstall --global babel-cli),

  安装成功后,devDependencies(依赖)会出现一个"babel-cli": "^6.26.0"(命令行工具,这一步还只能使用命令行工具,并不能进行转译),

4,安装转译依赖 npm install  --save-dev babel-preset-env(

  安装成功后,devDependencies(依赖)会出现一个"babel-preset-env": "^1.7.0"

5,在package.json中配置babel ,转译规则需要安装依赖 
  (npm install --save-dev babel-preset-es2015)

{
"name": "es6-babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
//添加babel配置
"babel":{
//presets 定义转译规则
"presets":["es2015"]
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1"
}
}

6,在命令行中调用babel,在package.json 中添加

 "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib" //把src 下面的所有文件 转译放到lib 文件下面
},

7,编译es6代码,新建连个文件夹src 和 lib ,因为我们上面命令用的是 babel src -d lib,然后运行编译命令npm run build   就可以看到src 下面的文件被全部编译对应的放在lib文件夹下面,需要使用直接引入lib文件夹下面对应的文件

es6 babel 安装以及使用的更多相关文章

  1. babel安装

    大家都知道目前ES6不是浏览器全部都是支持的,所以要通过转码器先进行转码然后再编译代码.小心在学习ES6之前先安装了babel转码器,虽然当时安装的时候困难重重,遗憾的是没有把解决方案总结一下,别人询 ...

  2. es6 babel转码器安装配置及常见命令

    示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...

  3. Babel安装在本地并用webstrom由ES6转Es5

    1进入到根目录 2安装babel npm install babel-cli --save-dev 3安装其他库 npm install --save-dev  babel-preset-env 4创 ...

  4. 在webstrorm中配置好es6 babel

    第一步,新建一个项目,我这里建立了基于express 的node项目 第二步:将JavaScript语言版本切换为ECMAScript6 点击File —>settings,弹出设置框.把js的 ...

  5. Babel 安装教程

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...

  6. es6 babel编译

    本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里  ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...

  7. ES6 Babel 简单使用

    ECMAScript 是 JS 的语言标准.而 ES6 是新的 JS 语法标准. PS:严格来说,ECMAScript 还包括其他很多语言的语言标准. ECMAScript 发展历史 1995年:EC ...

  8. ES6 - Babel编译环境搭建

    都看到这里了,我就不写什么node环境安装之类的了. 直接从新建项目文件夹后开始吧! 安装依赖: 命令行cd到项目文件夹之后,执行以下命令:(mac记得前边加sudo) npm init –y  // ...

  9. es6 ---- babel

    babel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类我们还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等 ...

随机推荐

  1. Java多线程-CountDownLatch、CyclicBarrier、Semaphore

    上次简单了解了多线程中锁的类型,今天要简单了解下多线程并发控制的一些工具类了. 1. 概念说明: CountDownLatch:相当于一个待执行线程计数器,当计数减为零时表示所有待执行线程都已执行完毕 ...

  2. SpringMVC错误:nested exception is java.lang.IncompatibleClassChangeError: class org.springframework.core.type.clas

    这是jar包冲突引起的 spring-core.jar已经有asm 所以不用再单独导入asm包了

  3. F#周报2019年第46期

    新闻 使用Pulumi和.NET Core创建现代云应用 宣告.NET Core 3.1预览版3 ML.NET模型构建器升级 .NET Framework修复工具 Mac上的Visual Studio ...

  4. Entity Framework Core For MySql查询中使用DateTime.Now的问题

    背景 最近一直忙于手上澳洲线上项目的整体迁移和升级的准备工作,导致博客和公众号停更.本周终于艰难的完成了任务,借此机会,总结一下项目中遇到的一些问题. EF Core一直是我们团队中中小型项目常用的O ...

  5. Rust 入门 (一)

    Rust 语言的介绍.特性什么的都不说了,如有需要,请自行了解.这里我们直接进去正题. 一.开发环境 mac或linux系统,在命令行安装 curl https://sh.rustup.rs -sSf ...

  6. 面试官:关于Java性能优化,你有什么技巧

    通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化. 一般有两种方案:即优化代码或更改设计方法.我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性 ...

  7. 解决php使用支付宝SDK报错问题

    最近公司将一些项目转移了服务器,后来发现使用支付宝支付时发现出现错误,错误如下: 1 The each() function is deprecated. This message will be s ...

  8. 扛把子组20191017-5 alpha week 2/2 Scrum立会报告+燃尽图 04

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/9801] 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 ...

  9. python3 之 趣味数学题(爱因斯坦)

    爱因斯坦曾出过这样一道有趣的数学题: 有一个长阶梯,若每步上 2 阶,最 后剩 1 阶; 若每步上 3 阶,最后剩 2 阶; 若每步上 5 阶,最后剩 4 阶; 若每步上 6 阶,最后剩 5 阶; 只 ...

  10. 使用RNN进行imdb影评情感识别--use RNN to sentiment analysis

    原创帖子,转载请说明出处 一.RNN神经网络结构 RNN隐藏层神经元的连接方式和普通神经网路的连接方式有一个非常明显的区别,就是同一层的神经元的输出也成为了这一层神经元的输入.当然同一时刻的输出是不可 ...