VS Code配置babel环境

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Cinderella___/article/details/81071098

Babel 是一个 JavaScript 编译器本文

本文介绍如何将babel配置到vs Code中,并且边写ES6,边编译为ES5,实时查看。

比如我先建一个express项目,普通项目也OK:

第一步:安装 babel-cli

cd进入项目根目录,执行命令: npm install babel-cli --save-dev

// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

第二步:安装转码规则:

npm install babel-preset-env --save-dev

第三步:安装完成之后,再创建配置文件 .babelrc这个文件,得放在项目根目录下,presets字段设置的就是转码规则:

{

    "presets":["env"]

}

然后就可以测试了:

在项目根目录下创建1.js

class Point{
    constructor(x,y){
         this.x = x;
         this.y = y;
    }
    toString(){
        return "(" + this.x + "," + this.y + ")";
    }
}
 let p = new Point(1,2);
 console.log ( p.toString() );
 console.log(Point.name + "..............................................");
 let p2 = new Point();
 p2.x = 'x2';
 p2.y = 'y2';
 console.log(p2.toString());

因为我们现在是将babel安装到了当前目录下,所以不能直接在终端中babel转换命令,得使用npm来运行,所以先在packge.json中编写:

"scripts": {
    "start": "node ./bin/www",
    "build": "babel 1.js -o build.js -w"
  }

// 编译1.js文件,-o表示输出到build.js中 ,-w代表实时编译,一保存就立马编译并且写回到build.js文件中

在VS CODE 中可以讲视图调整为下图所示,左边边写ES6代码,保存文件,右边实时编译。

进入根目录,npm run build运行,查看结果:

展开阅读全文

配置babel

04-18

<p>rn <strong><span style="font-size:14px;">GraphQL 是什么 ?</span></strong> rn</p>rn<p>rn GraphQL是Facebook开源的一种用于 API 的查询语言,并有可能成为未来的API规范<strong>。</strong> rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="font-size:14px;">哪些公司在使用GraphQL&nbsp; ?</span></strong> rn</p>rn<p>rn 越来越多主流的科技公司都开始拥抱GraphQL,比如facebook,twitter,Airbnb,github,reddit,Netflix,阿里,百度等等。rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="font-size:14px;">为什么使用Prisma ?</span></strong> rn</p>rn<p>rn prisma是一个超越ORM的数据库工具,它可以让你快速开发GraphQL API,让你免去了大部分的工作,开发GraphQL服务器从未如此简单。rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="font-size:14px;">我是否需要精通 后端语言 和 数据库 才能学习这门课程 ?</span></strong> rn</p>rn<p>rn 并不需要,甚至你可以在完全不懂任何后端语言和数据库的前提下掌握这门课程,并完成GraphQL服务器的开发。rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="font-size:14px;">我可以使用什么开发语言 ?</span></strong> rn</p>rn<p>rn Prisma 支持4种开发语言,分别是 javascript ( nodejs后端 ),TypeScript,flow,Go。未来还会支持更多的语言。rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="font-size:14px;">成为优秀全栈工程师的机遇 ?</span></strong> rn</p>rn<p>rn GraphQL并不复杂,通过学习本门课程你便可以开发GraphQL 后端服务器,并且学会在前端调用GraphQL API。rn</p>rn<p>rn 如果你是前端工程师,那么学习完本课程,你将能成为一名全栈开发者。rn</p>rn<p>rn 如果你是后端工程师,那么学习完本课程,再稍加学习些前端基础知识,便能成为全栈开发者。rn</p>rn<p>rn 如果你是 ios/安卓 工程师,那么学习完本课程,你便能成为移动端的全栈开发者。rn</p>rn<p>rn <span>如果你是网页/UI设计师,那么稍加学习javascript,再学习完本课程,你也能有机会成为全栈开发者。</span> rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="font-size:14px;">开发GraphQL应用是否很难 ?</span></strong> rn</p>rn<p>rn 刚好相反,觉得难是因为你对它还不了解。实际上它很简单,很前沿,也很强大。rn</p>rn<p>rn <br />rn</p>rn<p>rn <img alt="" src="https://img-bss.csdn.net/201904170632564341.png" /> rn</p>rn<p>rn <img alt="" src="https://img-bss.csdn.net/201904170633112158.png" /> rn</p>rn<p>rn <img alt="" src="https://img-bss.csdn.net/201904170633325916.png" /> rn</p>rn<p>rn <img alt="" src="https://img-bss.csdn.net/201904170633504420.png" /> rn</p>rn<p>rn <img alt="" src="https://img-bss.csdn.net/201904170634041709.png" /> rn</p>

没有更多推荐了,返回首页