ES2015(es6)
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

搭建一个es6的开发环境

发布时间：2019-08-09 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了搭建一个es6的开发环境，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.前提是你已经安装了node,npm
2.手动创建一个工作目录 dist,src,index.htML
以下是index.html的内容


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
         <script type="text/javascript" src="./dist/index.js"></script>
    </head>
    <body>
        
    </body>
    </html>

3.在src 目录下创建一个index.js,这里写我们的es6代码

class Car{
    constructor(maker,PRice){
        this.maker=maker;
        this.price=price;
    }

    getInfo(){
        console.LOG(this.maker+"costs"+this.price);
    }
}

VAR car1=new Car("me",100);
car1.getInfo();

var car2=new Car("he",100000);
car2.getInfo();

4.接下来我们需要把es6语法编译成我们浏览器所识别的语法es5文件，那就用到我们的神奇 babel,在安装babel之前我们要先初始化一下项目 npm init -y

5全局安装babel-cli
输入以下命令 ：cnpm install -g babel-cli

此时package文件中就有babel的依赖了

你以为安装babel-cli就完事了吗，你可以运行babel src/index.js -o dist/index.js
你会发现，确实在dist下面生成了一个index.js文件，但是还是es6语法啊

来，我们再安装一个转换包
cnpm install --save-dev babel-preset-es2015 babel-cli 安装完成之后我们的json文件就有依赖了，
touch .babelrc执行这个命令 来创建一个文件，这个文件里面书写如下代码

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

好了，此时再去执行刚刚那个命令 babel src/index.js -o dist/index.js
你会发现我们的es6代码已经转化成es5代码了

搭建一个es6的开发环境

我们每次执行那么长的命令是不是有点太麻烦啊，我们现在来修改一下pakage.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.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

现在我们运行 npm run build 就可以啦

脚本宝典总结

以上是脚本宝典为你收集整理的搭建一个es6的开发环境全部内容，希望文章能够帮你解决搭建一个es6的开发环境所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：allallbabelbuttonbuttonClassconstconstconstconstructordives5es6ininintjavanamenamenewnewnodepackagepackagepluginpluginpost-format-galleryresetresetselectstaticstaticstatictexttextthistoptopundefinedundefinedvar
猜你在找的ES2015(es6)相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程
热门ES2015(es6)教程