在搭建es6开发环境之前,先简单介绍一下es6。

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

我们为什么要使用es6?es6有什么优点?......,我会在后面写一个es6专题系列,来介绍es6的使用。本次分享的内容是 es6的开发环境搭建。

那么,你肯定又要问,问什么要搭建es的开发环境,上面不都说 es6是JavaScript 语言的下一代标准了嘛,我们平时写的js都不需要搭建环境,直接在浏览器里就能运行。

因为至今各大浏览器厂商所开发的 JavaScript 引擎都还没有完成对 ES2015 中所有特性的完美支持,如果直接使用的话,会报错的。

所以我们既想使用es6带来的新语法新特性,又想让现在的浏览器支持es6语法,于是乎像 babelTraceur 等编译器便出现了。它们能将尚未得到支持的 ES2015 特性转换为 ES5 标准的代码,使其得到浏览器的支持。

这里我们就使用Babel把ES6编译成ES5。

建立工程目录

先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist

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

编写index.html

文件夹建立好后,我们新建一个index.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./dist/index.js"></script>
</head>
<body>
Hello ECMA Script 6
</body>
</html>

需要注意的是在引入js文件时,引入的是dist目录下的文件。

<script src="./dist/index.js"></script>

编写index.js

在src目录下,新建index.js文件。这个文件很简单,我们只作一个a变量的声明,并用console.log()打印出来。

let a=1;
console.log(a);

我们用了let声明,这里let是ES6的一种声明方式,接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件。

初始化项目

在安装Babel之前,需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入下边的命令:

npm init -y

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

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

可以根据自己的需要进行修改,比如我们修改name的值。

全局安装Babel-cli

在终端中输入以下命令,如果你安装很慢的话,可以使用淘宝镜像的cnpm来进行安装。安装cnpm的方法,大家自己百度吧。

cnpm install -g babel-cli

虽然已经安装了babel-cli,只是这样还不能成功进行转换,如果你不相信可以输入下边的命令试一下。

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

你会发现,在dist目录下确实生产了index.js文件,但是文件并没有变化,还是使用了ES6的语法。因为我们还需要安装转换包才能成功转换,继续往下看吧。

本地安装babel-preset-es2015 和 babel-cli

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

安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。

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

新建.babelrc

在根目录下新建.babelrc文件(注意,以点开头的文件是隐藏文件,需要在linux环境通过命令创建),并打开录入下面的代码

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

这个文件我们建立完成后,现在可以在终端输入的转换命令了,这次ES6成功转化为ES5的语法。

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

简化转化命令

在学习vue 的时候,可以使用npm run build 直接利用webpack进行打包,在这里也希望利用这种方式完成转换。打开package.json文件,把文件修改成下面的样子。

{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}

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

这样,一个简单的基本的编译环境就OK了。

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

  1. 一.ES6的开发环境搭建

    前言: 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.Webpack是有自动编译转换能力的,除了Webpa ...

  2. Visual Studio中Es6的开发环境搭建

    1.打开终端,输入初始化代码.输入代码之后会在目录中出现package.json,可以在红色下划线上写上作者名和描述(不写也可以) npm init -y    2.安装Babel转换器 npm in ...

  3. 第一节、ES6的开发环境搭建

    https://blog.csdn.net/zls986992484/article/details/70819462 下面这个不好使 https://blog.csdn.net/gao5311624 ...

  4. ES6系列_1之开发环境搭建

    前言: 1.es6的简单介绍: ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 JavaScript 语言 ...

  5. 从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目

    项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通 ...

  6. 如何学习web开发环境搭建和脚手架

    Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...

  7. rollup 开发环境搭建

    rollup 开发环境搭建 初始化项目使用lerna管理项目 使用npm init 初始化项目 npm init -y 安装lerna并初始化项目 npm install lerna --save-d ...

  8. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  9. IntelliJ IDEA安装及jsp开发环境搭建

    一.前言 现在.net国内市场不怎么好,公司整个.net组技术转型,就个人来说还是更喜欢.net,毕竟不是什么公司都像微软一样财大气粗开发出VS这样的宇宙级IDE供开发者使用,双击sln即可打开项目, ...

随机推荐

  1. 关于cisco ccp 或sdm管理gns3中思科路由器的成功分享

    本来工作环境中有一台c1841,闲来无事,升级了最新的IOS=c1841-adventerprisek9-mz.151-4.M6.bin,在xp虚拟机中安装sdm(新windows系统不支持)和在wi ...

  2. JavaScript作用域问题

    最近在研究JavaScript,遇到了好多问题,之前还是挺清楚JavaScript作用域的,今天突然发懵了,求哪个大神给讲解一下? 谢谢!

  3. 基于spark和sparkstreaming的word2vec

    概述 Word2vec是一款由谷歌发布开源的自然语言处理算法,其目的是把words转换成vectors,从而可以用数学的方法来分析words之间的关系.Spark其该算法进行了封装,并在mllib中实 ...

  4. C#超简单方法实现两个richtextbox控件滚动条同步滚动

    此文章属于作者原创,转载请注明,谢谢 有时候我们需要实现对照文章等,往往将文本放到两个richtextbox控件中,但是,如果我们需要同步滚动查看,来达到更好的观看效果. 当然,传统的方法重载控件或者 ...

  5. Telegram学习解析系列(三) : Build Telegram报错分析总结

    正好通过这次 Telegram 的运行,很想把常见的项目运行的错误好好的总结一下,在前面的博客中,又星星散散的总结过错误和一些警告的消除方法,这次把错误处理一下,还有Telegram项目中有999+的 ...

  6. Qt Opencv 在Linux下摄像头简单示例(转)

    下面写的文章也许网上也有类似的,但是大多数都没有给出思路及背景,让初学者每次都只能学到一点皮毛,不少知识需要大量搜索零碎地拼凑起来.题外话,虽然现在是碎片化信息时代,但正是这样信息整合能力也显得非常重 ...

  7. 模拟实现简化版List迭代器&嵌入List

    1.迭代器(iterators)概念(1)迭代器是一种抽象的设计概念,其定义为:提供一种方法,使他能够按顺序遍历某个聚合体(容器)所包含的所有元素,但又不需要暴露该容器的内部表现方式. (2)迭代器是 ...

  8. SSH实现无密码验证登录

    http://blog.csdn.net/houqd2012/article/details/8544517

  9. 观《IT培训行业揭秘》触发北大青鸟回忆

    在园子里看到这篇文章<IT培训行业解密(六)>时,挺有感触,回忆顿时涌上心头: 我想起了当年单纯的我们因为各自的原因来到北大青鸟,或因前途迷茫而选择想找一条出路,或因父母的信息闭塞而想给我 ...

  10. VR全景,零售业冬天里的一把火——全景智慧城市

    对今天的中国来说,寻找经济转型的突破口,寻找经济权力的新霸主,零售业应该当仁不让. 零售业正在经历一场脱胎换骨的改造.一方面零售额达到前所未有的水平,另一方面,传统零售商也面临诸多挑战,其中之一,便是 ...