在本章中,我们将使用babel和gulp创建项目设置. Gulp是一个使用Node.js作为平台的任务运行器. Gulp将运行将JavaScript文件从es6转换为es5的任务,一旦完成将启动服务器以测试更改.我们在项目设置中使用了babel 6.如果您想切换到babel 7,请使用 @ babel/babel-package-name 安装所需的babel包.
我们将首先创建项目使用npm命令并安装所需的软件包.
npm init
我们创建了一个名为gulpbabel的文件夹.此外,我们将安装gulp和其他必需的依赖项.
npm install gulp --save -dev npm install gulp-babel --save-dev npm install gulp-connect --save-dev npm install babel-preset-env --save-dev npm install babel-core --save-dev
我们将预设环境详细信息添加到 .babelrc 文件中,如下所示
gulpfile.js
var gulp =require('gulp'); var babel =require('gulp-babel'); var connect = require("gulp-connect"); gulp.task('build', () => { gulp.src('src/./*.js') .pipe(babel()) .pipe(gulp.dest('./dev')) }); gulp.task('watch', () => { gulp.watch('./*.js', ['build']); }); gulp.task("connect", function () { connect.server({ root: ".", livereload: true }); }); gulp.task('start', ['build', 'watch', 'connect']);
我们在gulp中创建了三个任务,['build','watch','connect']. src文件夹中可用的所有js文件将使用babel转换为es5,如下所示 :
gulp.task('build', () => { gulp.src('src/./*.js') .pipe(babel()) .pipe(gulp.dest('./dev')) });
最终更改存储在dev文件夹中. Babel使用 .babelrc 中的预设详细信息.如果您想要更改为其他预设,可以更改 .babelrc 文件中的详细信息.
现在将在src文件夹中创建一个.js文件es6 javascript并运行 gulp start 命令执行更改.
src/main.js
class Person { constructor(fname, lname, age, address) { this.fname = fname; this.lname = lname; this.age = age; this.address = address; } get fullname() { return this.fname +"-"+this.lname; } }
命令:gulp start
dev/main.js
这是使用babel :
"use strict"; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i <props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Person = function () { function Person(fname, lname, age, address) { _classCallCheck(this, Person); this.fname = fname; this.lname = lname; this.age = age; this.address = address; } _createClass(Person, [{ key: "fullname", get: function get() { return this.fname + "-" + this.lname; } }]); return Person; }();
Index.html
这是使用 transpiled dev/main完成的.js :
<html> <head></head> <body> <script type="text/javascript" src="dev/main.js"></script> <h1 id="displayname"></h1> <script type="text/javascript"> var a = new Student("Siya", "Kapoor", "15", "Mumbai"); var studentdet = a.fullname; document.getElementById("displayname").innerHTML = studentdet; </script> </body> </html>
输出