ES6第一节：开发环境的搭建
2019-01-22 02:00:15来源：博客园 阅读 ()
前言：由于目前浏览器对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"下添加一段代码：
以后编译打包直接用： npm run build 就可以了，不用 babel src/index.js -o dist/index.js 一长串这么麻烦
1 "scripts": { 2 "build": "babel src/index.js -o dist/index.js" 3 }
原文链接:https://www.cnblogs.com/herxondon/p/10301446.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- jQuery插件开发全解析 2020-03-25
- JS简单去除数组中重复项的方法 2020-03-16
- vue.js开发环境搭建教程 2020-03-16
- 微信小程序开发图片拖拽实例详解 2020-03-16
- JS之相等操作符详解 2020-03-12
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
