esnext —— 将 ES6 转成 JavaScript 代码

esnext 是一个 JavaScript 库,可以将 ES6 草案规范语法转成今天的 JavaScript 语法。

例如:

/*
On the left is code written with new JavaScript features,
and on the right is the console output, plus the same code
re-written so it can run in today's browsers.

Edits made to the code on the left will re-generate and
re-run the code on the right. Try it out!
*/

// Classes
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get name() {
    // Template strings
    return `${this.firstName} ${this.lastName}`;
  }

  toString() {
    return this.name;
  }
}

console.log(
  'Full name is:',
  new Person('Michael', 'Bluth')
);

// Arrow functions
console.log([1, 2, 3].map(x => x * x));

// Rest params
function join(delim, ...items) {
  return items.join(delim);
}

// Spread args
console.log(join('-', ...[415, 555, 1212]));

将被转换成:

/*
On the left is code written with new JavaScript features,
and on the right is the console output, plus the same code
re-written so it can run in today's browsers.

Edits made to the code on the left will re-generate and
re-run the code on the right. Try it out!
*/

// Classes
var $__Array$prototype$slice = Array.prototype.slice;
var $__Object$defineProperties = Object.defineProperties;

var Person = function() {
  "use strict";

  function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  $__Object$defineProperties(Person.prototype, {
    name: {
      get: function() {
        // Template strings
        return "" + this.firstName + " " + this.lastName + "";
      },

      enumerable: true,
      configurable: true
    },

    toString: {
      value: function() {
        return this.name;
      },

      enumerable: false,
      writable: true
    }
  });

  $__Object$defineProperties(Person, {});
  return Person;
}();

console.log(
  'Full name is:',
  new Person('Michael', 'Bluth')
);

// Arrow functions
console.log([1, 2, 3].map(function(x) {
  return x * x;
}));

// Rest params
function join(delim) {
  var $__arguments = arguments;
  var items = [].slice.call($__arguments, 1);
  return items.join(delim);
}

// Spread args
console.log(join.apply(null, ['-'].concat($__Array$prototype$slice.call([415, 555, 1212]))));

使用方法:

var transpiler = require('es6-module-transpiler');
var Container = transpiler.Container;
var FileResolver = transpiler.FileResolver;
var BundleFormatter = transpiler.formatters.bundle;

var container = new Container({
  resolvers: [new FileResolver(['lib/'])],
  formatter: new BundleFormatter()
});

container.getModule('index');
container.write('out/mylib.js');

文章转载自 开源中国社区 [http://www.oschina.net]

时间: 2024-09-13 06:14:58

esnext —— 将 ES6 转成 JavaScript 代码的相关文章

10 个最终编译成 JavaScript 的脚本语言

与简单的网站相比,现代应用程序有更多 不同的需求 .但是,浏览器是一个拥有(大部分)固定技术的平台,而且JavaScript仍然是web应用程序的核心语言:需要在浏览器中运行的任何应用程序都必须用该语言实现. 我们都知道JavaScript并不是实现所有任务的最佳语言,当遇到复杂的应用时,它可能就不太适合.为了避免这个问题,已经创建了几种新的语言和现有语言的变体,它们都生成可以在浏览器中运行的代码,而无需编写任何JavaScript代码,也不用考虑语言的局限性. 文中介绍了10个有趣的语言,这些

圣诞节,把你的 JavaScript 代码都装扮成圣诞树吧

效果的话,可以去看一下我们公司的官网(http://www.souche.com ),里面涉及到的js代码在今天大部分被临时替换成了圣诞树,打开每个js代码即可看到效果. 其实也不神奇,我们使用了自己写的一个nodejs库,如果您要实现这样的效果,只需要按照下面第一章节的方法即可.当然您也可以在线压缩代码:http://f2e.souche.com/cheniu/js2image.html 下面分两章节,分别讲解如何使用js2image这个库 和 js2image这个库的原理. github地址

[译] ES6+ 中的 JavaScript 工厂函数(第八部分)

本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliott 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:lampui 校对者:IridescentMia.sunui Smoke Art Cubes to Smoke - MattysFlicks - (CC BY 2.0) 注意:这是"软件编写"系

如何这段C#代码翻译成VB代码?谢谢!

问题描述 如何这段C#代码翻译成VB代码?谢谢! private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { //自动点击弹出确认或弹出提示 IHTMLDocument2 vDocument = (IHTMLDocument2)webBrowser1.Document.DomDocument; vDocument.parentWindow.execScrip

Javascript代码混淆综合解决方案

javascript|解决 Javascript 代码混淆的目的 Javascript 是一种解释执行的脚本语言,主要应用于 Web 领域的客户端的浏览器中:由于 Javascript 解释执行的特性,代码必须明文下载到客户端,并且可以很容易的进行调试,使得 Javascript 代码的保护非常困难: 不同的人对 Javascript 代码的保护有不同的看法:有的人辛苦努力的代码,却可以被竞争对手轻易获得,他们就非常希望能有保护 Javascript 代码的方案,但现有的方案可能无法满足他们的要

用JSP在客户端生成JavaScript代码来实现表单校验

javascript|js|客户端 今天费了一天时间就是做这个东西,原理很简单,就是用 JSP 在页面的开始部分生成一段代码,如 errorcheck.jsp 中所示,但程序太长,还是费了我不少时间来改写. 主程序是名为 ErrorCheck.java ,有了这个 ErrorCheck 的 Bean,我们就再也不用为了表单校验去写那一大堆烦人的 JavaScript 代码了.ErrorCheck 类已帮我们生成了几乎所有你将会用到的校验方法,如是否为数字,长度的校验,是否为合法email等,你只

不使用浏览器运行javascript代码的方法

用js写一段小程序,但是又觉得使用浏览器去运行挺麻烦的,下面为大家介绍下如何使用java程序调用javascript程序,有类似需求的朋友可以参考下哈,希望对大家有所帮助   有时候我们想用js写一段小程序,但是又觉得使用浏览器去运行挺麻烦的,那么现在我们来看一下如何使用java程序调用javascript程序,这样就可以不借助浏览器就可执行js代码了. 之 所以有这个需求是因为这几天在做的一个项目中碰到了这样的问题,我有一个javascript脚本,但是这个项目的其他代码都是用CC++写的,不

使用AOP改善javascript代码

  这篇文章主要介绍了使用AOP改善javascript代码,需要的朋友可以参考下 Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用. 1, 防止window.onload被二次覆盖. 2,无侵入的统计代码. 3, 分离表单请求和校验. 4,给ajax请求动态添加参数. 5,职责链模式. 6, 组合代替继承. 先给出before和after这2个"切面"函数. 顾名思义,就

5个书写JavaScript代码的坏习惯,看看你中枪了没?

 Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态.如此被广泛使用.如此根植于我们的生活中的另外一种语言.它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型.其实,你和Javascript都站错了立场,而现在,你让Javascript很生气.这里有五个原因能说明你的Javascript技术很烂. 1. 你没有使用命名空间. 是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量?Javascript里