一、首先先建立一个项目工程目录,并在目录下建立两个文件夹:srcdist

  • src:书写ES6代码的文件夹,写的js程序都放在这里。
  • dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。

文件建好后,在src根目录下新建一个index.html文件

二、在src和dist文件下的js文件中都编写:

三、初始化项目

进入该目录,打开cmd命令行工具 先初始化我们的项目,输入 :

npm init -y 

-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。

{
"name": "es6",
"version": "1.0.0",
"description": "ECMASript2016",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "hezihao",
"license": "ISC"
}

可以根据自己的需求,修改name或者author值

四、全局安装Babel-cli

npm install -g babel-cli

五、本地安装 bable-preset-es2015 和 babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

安装完成后,可以看到package.json文件,多出了devDependencies选项

"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
}

六、在根目录下新建.babelrc文件

{
"presets":[
"es2015"
],
"plugins":[]
}

七、建立完成后,就可以成功将ES6转化为ES5语法了,在cmd输入

babel src/index.js -o dist/index.js

效果图展示:

  

PS:简化转化命令:

打开package.json,将文件修改成这样

修改好后,以后我们就可以在cmd中使用 npm run build 来进行转换了。

目录如下:

搭建一个ES6开发环境的更多相关文章

  1. 如何通过Docker搭建一个swoft开发环境

    本篇文章给大家分享的内容是关于如何通过Docker搭建一个swoft开发环境 ,内容很详细,有需要的朋友可以参考一下,希望可以帮助到你们. Swoft首个基于 Swoole 原生协程的新时代 PHP ...

  2. 搭建一个java开发环境的步骤

    首先思考java开发环境需要些什么? 1.适用于我们开发环境的jdk 2.对应开发环境的IDE 3.如果是web应用,还需要web服务器,常用的有Tomcat 1) 下载对应组件 2) 安装 jdk安 ...

  3. 2,搭建一个java开发环境

    (1)java开发需要的条件? 1)适用于环境开发的jdk(里面包括了jre和加热里面包括了jvm) 2)对应开发环境的eclipse 3)如果涉及到web开发,还需要web服务器(Tomcat) ( ...

  4. 快速搭建一个vue开发环境

    常规的搭建就是从npm到vue到webpack这样一个一个的来,这样一套下来说不上复杂但是也不简单.之前公司的vue后台项目 我还是写的轻车熟路的,因为前端同事已经把架子搭好了,环境配置的丝般顺滑,你 ...

  5. 在MAC上搭建python数据分析开发环境

    最近工作转型到数据开发领域,想在本地搭建一个数据开发环境.自己有三年python开发经验,马上想到使用numpy.scipy.sklearn.pandas搭建一套数据开发环境. ubuntu的环境,百 ...

  6. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  7. ES6 学习笔记 (2)-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境

    笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...

  8. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  9. 面试官:自己搭建过vue开发环境吗?

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

随机推荐

  1. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  2. Python运维开发基础08-文件基础

    一,文件的其他打开模式 "+"表示可以同时读写某个文件: r+,可读写文件(可读:可写:可追加) w+,写读(不常用) a+,同a(不常用 "U"表示在读取时, ...

  3. Redis Key操作

    [Redis Key操作] 1.GETSET key value 将给定 key 的值设为 value ,并返回 key 的旧值(old value). 当 key 存在但不是字符串类型时,返回一个错 ...

  4. 【转】字符串匹配的KMP算法:移动位数 = 已匹配 - 部分匹配值(共有长度)

    计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD"? 许多算 ...

  5. 单词缩写集 · word abbreviation set

    [抄题]: 一个单词的缩写根据以下的形式.下面是一些缩写的例子 a) it --> it (没有缩写) 1 b) d|o|g --> d1g 1 1 1 1---5----0----5-- ...

  6. Golang之interface(多态,类型断言)

    多态用法 package main //一种事物的多种形态,都可以按照统一的接口进行操作 //多态 import ( "fmt" "math/rand" &qu ...

  7. MongoDB管理与开发实战详解文摘

    第1篇 基础篇 第1章 MongoDB简介 关系型数据库面临的问题:数据库并发负载高,海量数据存储与访问,数据库数据越来越大,事务管理的负担,关系型数据库读.写实时性的忽略,多表关联查询被弱化 第2章 ...

  8. thinkphp ajax分页加载更多最简单的实现方法

    <div class="li_list"> <volist name="list" id="vo"> <div ...

  9. parseInt(string, radix)

    参数 描述 string 必需.要被解析的字符串. radix 可选.表示要解析的数字的基数.该值介于 2 ~ 36 之间. 如果省略该参数或其值为 0,则数字将以 10 为基础来解析.如果它以 “0 ...

  10. Map类

    Map类 方法 方法名 返回类型 说明 addLayer(layer, index?) layer 增加一个esri图层到map中,示例: var baseMapLayer = new ArcGIST ...