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锁-Synchronized深层剖析

    Java锁-Synchronized深层剖析 前言 Java锁的问题,可以说是每个JavaCoder绕不开的一道坎.如果只是粗浅地了解Synchronized等锁的简单应用,那么就没什么谈的了,也不建 ...

  2. [ASP.NET Core 3框架揭秘] 文件系统[1]:抽象的“文件系统”

    ASP.NET Core应用 具有很多读取文件的场景,比如配置文件.静态Web资源文件(比如CSS.JavaScript和图片文件等)以及MVC应用的View文件,甚至是直接编译到程序集中的内嵌资源文 ...

  3. SqlServer2005 查询 第一讲 计算列

    数据库查询[最重要且在数据库中难度最大] 声明一下我这里用的数据库样例是郝斌老师的(scott库) 我尽最大努力把复杂的问题简单化,方便理解,希望我写的东西能够帮助到你们 有些复杂的东西我我用自己的方 ...

  4. 了解Spring的基本概念

    参考资料:https://www.jianshu.com/p/1c483bd8fd6d 在正式学习Spring框架之前,肯定有很多疑问,比如说: 1.Spring中经常出现的IOC.AOP.DI是什么 ...

  5. hadoop伪分布式

    一.安装jdk 1.下载解压 2.配置环境变量 配置成功: 二.ssh免密码登录 https://www.cnblogs.com/suwy/p/9326087.html 三.hadoop伪分布式配置 ...

  6. git Lab ssh方式拉取代码失败

    gitLab在linux上已经安装好了, 在配置项目的时候报如下异常 使用http方式没问题, 但是用ssh方式设置repository URL 提示资源库不存在. returned status c ...

  7. C#解析XML之流模型-XMLTextReader类

    C#读取XML文档之XMLTextReader 类有一些构造程序来适应各种各样的情况,比如从一个已经存在的数据流或统一资源定位网址读取数据.最常见的是,你或许想从一个文件读取XML数据,那么也就有一个 ...

  8. Future模式的学习以及JDK内置Future模式的源码分析

    并发程序设计之Future模式 一).使用Future模式的原因 当某一段程序提交了一个请求,期待得到一个答复,但服务程序对这个请求的处理可能很慢,在单线程的环境中,调用函数是同步的,必须等到服务程序 ...

  9. Linux(CentOS65)

    首先下载VMware,然后下载CentOS镜像文件,VM的版本尽量高一点,因为软件一般都有向下兼容性,如果版本太低,可能匹配不了CentOS. 安装VMTools工具 主要用于虚拟主机显示优化与调整, ...

  10. 复习-java集合简记

    1.集合概述 ava集合类存放于 java.util 包中,是一个用来存放对象的容器. 集合只能保存对象(实际上也是保存对象的引用变量),Java主要由两个接口派生而出:Collection和Map, ...