VS Code配置babel环境

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运行，查看结果：