ES6第一节:开发环境的搭建
前言:由于目前浏览器对es6的支持度不高,需要借助babel将编写好的es6代码转换成es5,浏览器才能解析。
需要在nodejs环境下运行
一. 建立结构:两个文件夹和一个html文件,分别是src和dist还有index.html,还要在src目录下新建一个index.js文件,并在index.html里将其引用进去
如: dist
src
- index.js
index.html
下面是index.html中的代码: (注意index中引用的js是dist目录下的,因为dist是编译后的js,src里的js是我们编写的es6代码)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> 7 <title>document</title> 8 <script src="./dist/index.js"></script> 9 </head> 10 <body> 11 hello es6 12 </body> 13 </html>
二.初始化项目:
用 cnpm init -y
说明:cnpm是淘宝的镜像源,因为npm安装往往很慢,没有安装的朋友可以直接将下面的地址复制到命令行按回车即可安装,就能使用cnpm了,-y代表全部默认同意,就不用一次次按回车了:npm install -g cnpm --registry=https://registry.npm.taobao.org
三.安装babel相关:
1.全局安装 babel-cli
cnpm install babel-cli -g
2.本地安装babel-preset-es2015 和 babel-cli
cnpm install babel-preset-es2015 babel-cli --save-dev
四.根目录下新建:.babelrc 文件,并打开编辑:
1 { 2 "presets":[ 3 "es2015" 4 ], 5 "plugins":[] 6 }
•上面4大步配置好后,此时我们到src目录下的index.js文件中尝试编写es6语法的js代码:
1 let msg = "hello es6"; 2 console.log(msg);
编写完后我们最后一步就是编译了,接下来就是见证奇迹的时候了,打开终端,定位到当前目录,这里推荐使用visual studio code编辑器,会自动定位到当前目录:
1 babel src/index.js -o dist/index.js
这时到dist目录下去看,你会发现多了一个index.js的文件,并且里面的代码就是刚刚src目录下的index.js文件编译后的es5代码:
1 "use strict"; 2 3 var msg = "hello es6"; 4 console.log(msg);
至此,es6的运行环境搭建完成并且运行成功!
总结:1建立目录结构
2初始化当前项目
3安装babel编译工具
4编译打包:babel src/index.js -o dist/index.js
小技巧:简化编译打包命令:打开根目录的package.json文件,将"srcipt"下添加一段代码:
1 "scripts": { 2 "build": "babel src/index.js -o dist/index.js" 3 }
-学习永无止境,大家有什么问题可以互加好友讨论:vx:herxondon
推荐阅读
-
Linux搭建Hbase开发环境 博客分类: 大数据技术栈 大数据Hbase伪分布
-
Liunx搭建Mongodb开发环境 博客分类: NoSQL技术栈 MongodbNoSQL数据库
-
Linux搭建Hadoop开发环境 博客分类: 大数据技术栈 Hadoop大数据环境搭建Liunx
-
Ubuntu搭建Java开发环境笔记
-
Linux搭建Hbase开发环境 博客分类: 大数据技术栈 大数据Hbase伪分布
-
Linux搭建Mysql数据库开发环境 博客分类: SQL技术栈 Linuxmysql数据库优化
-
Python使用django搭建web开发环境
-
在Visual Studio上构建C++的GUI框架wxWidgets的开发环境
-
VsCode搭建Java开发环境的方法
-
monkeyrunner之安卓开发环境搭建教程(1)