BabelJS - 使用 Babel 6 进行项目设置

BabelJS - 使用 Babel 6 进行项目设置

在本章中,我们将看到如何在我们的项目中使用 babeljs。我们将使用 nodejs 创建一个项目,并使用 http 本地服务器来测试我们的项目。

项目package.json如下

{
  "name": "babelproject",
  "version": "1.0.0",
  "description": "babel use and study",
  "main": "index.js",
  "scripts": {
    "babel": "babel",
    "build": "lite-server",
    "babel-es6": "babel --preset es2015 src/index.js -o script/build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "lite-server": "^2.6.1"
  }
}

index.js

class Student {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

运行如下代码:

npm run babel-es6

生成的代码如下:

"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 Student = function () {
   function Student(fname, lname, age, address) {
      _classCallCheck(this, Student);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Student, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Student;
}();

新建一个html文件如下:

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="script/build.js?a=11"></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>

运行

npm run build

打开浏览器可以看到:

可以看见,我们创建了一个简单的将es6的语法转化成es2015的语法,保证了这个小的项目在大部分浏览器能够正常运行。

版权声明:著作权归作者所有。

相关推荐

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

Linux:使用visudo设置用户sudo权限

visudo我们可以修改/etc/sudoers文件来设置用户的sudo权限,修改/etc/sudoers一定要使用visudo命令,它可以让我们比较安全的修改此文件。visudo有以下特性:锁定文件避免多个同时编辑检查语法的完整性检查解析错误,以避免用户错误输入使用root的权限直接执行visudo,打开suders文件$visudo 注意:这里不需要输入shduers文件的路径,默认为/etc

[译]使用JDK 9 Flow API进行响应式编程

什么是响应式编程?响应式编程是关于处理数据项的异步流,也就是应用程序在数据项发生时对其进行响应。 数据流实质上是指随时间发生的数据项序列。与迭代内存数据相比, 这个模型的内存效率更高,因为数据是以流的形式处理的。在响应式编程模型中,有一个Publisher和一个Subscriber。 Publisher发布一个数据流,Subscriber异步订阅。该模型还提供了一种机

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

Nginx同一个域名配置多个项目

使用Nginx要在同一个域名下配置多个项目有两种方式:nginx按不同的目录分发给不同的项目启用二级域名,不同的项目分配不同的二级域名nginx按不同的目录分发给不同的项目在nginx的server节点配置server {     listen    80;     server_name example.c

使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。示

查看项目使用Swift的版本

使用xcode创建swift项目,你需要知道在项目中正在使用的swift版本。使用终端查看:swift -version 比较稳妥的方法是在xcode上查看,因为每个项目可能设定的swift 版本不一样。按路径打开:Project -> 选择项目的target -> Build Settings ->

Maven设置项目JDK版本为1.8

导入一个项目到iDEAL,项目中使用到lambda表达式的地方都报错,提示jdk版本不对。想到的第一种解决方案就是修改iDEAL的配置,修改两处的设置,如下:File → Settings → Java Compiler → Target bytecode version 改为1.8File → Project Structure → Modules → Language level 改为 8-L

Mac终端(zsh)使用SS代理进行连接

平时我们在使用SS代理服务后,浏览器可以正常fan墙使用,但是在终端里面使用git/brew/pip等命令时,速度却是出奇的慢,实际上这是由于虽然SS设置了全局设置,但是并没有把全局设置传递到终端。我们需要一些设置使得终端也能正确使用SS代理服务。SS搭建问题在这里不进行展开叙述,网上教程也很多,也有现成的SS服务可以购买。下面对终端设置SS代理服务进行简单的阐述。S:shadowsocks2.检

Linux设置命令行ip代理

Linux设置命令行代理 有些场景下需要为系统设置代理,比如OpenCV3在进行cmake编译时需要在线从amazon下载一些第三方包。现在多数同学采用的代理方案应该都是基于socks5协议,而默认的终端工具支持的代理类型都是http或https,所以这里需要socks协议到http协议的转换,转换之后采用终端的代理变量设置http代理即可。 我的系统环境为ubuntu 16.04,其他系统类似