webpack之es6和react.js

2017-02-17 Lim Geng
前端 webpack es6 react
昨天有朋友说让vsc支持react和es6太难配置了，我说直接用webpack吧，vsc仅仅用来敲代码就行了。之所以我这么说，因为我的vsc只是用来敲代码的，常用的git操作，依赖安装都是寄几在终端搞的。于是今天试了一下webpack，也踩了几脚坑，先让我擦干眼泪。 这里是这篇文章涉及到的源代码，如果需要运行可以直接跳到下面的最后一步生成。 如何配置 当你看到最终的是如何实现的时候，我其实是拒绝的，我宁可花长时间写的复杂点，但是很简单，绞尽脑汁也多写不了几行字。 创建目录 cd ~/Desktop mkdir hello-react cd hello-react 初始化npm npm init -y // 你也可以不 继续阅读 »

深入解析 ES6：Symbol

2015-07-24 W.Y.
ES6
Symbol 是什么？ Symbols 不是图标，也不是指在代码中可以使用小图片： javascript let 😻 = 😺 × 😍; // SyntaxError 也不是指代其他一些东西的语法。那么，Symbol 到究竟是什么呢？ more 七种数据类型 JavaScript 在 1997 年被标准化时，就有 6 种数据类型，直到 ES6 出现之前，程序中的变量一定是以下 6 种数据类型之一： Undefined Null Boolean Number String Object 每种数据类型都是一系列值的组合，前面 5 种数据类型值的数量都是有限的。Boolean 类型只有两个值：true 和 false，为 B 继续阅读 »

深入解析 ES6：let 和 const

2015-11-18 W.Y.
ES6
more 参考原文：[ES6 In Depth: let and const](https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-07-31 继续阅读 »

深入解析 ES6：Generator

2015-06-20 W.Y.
ES6
今天讨论的新特性让我非常兴奋，因为这个特性是 ES6 中最神奇的特性。 这里的“神奇”意味着什么呢？对于初学者来说，该特性与以往的 JS 完全不同，甚至有些晦涩难懂。从某种意义上说，它完全改变了这门语言的通常行为，这不是“神奇”是什么呢。 不仅如此，该特性还可以简化程序代码，将复杂的“回调堆栈”改成直线执行的形式。 我是不是铺垫的太多了？下面开始深入介绍，你自己去判断吧。 more 简介 什么是 Generator？ 看下面代码： javascript function* quips(name) { yield "hello " + name + "!"; yield "i hope you are enjoy 继续阅读 »

深入解析 ES6：Collections

2015-10-09 W.Y.
ES6
more 参考原文：[ES6 In Depth: Collections](https://hacks.mozilla.org/2015/06/es6-in-depth-collections/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-06-19 继续阅读 »

深入解析 ES6：Classes

2015-11-18 W.Y.
ES6
more 参考原文：[ES6 In Depth: Classes](https://hacks.mozilla.org/2015/07/es6-in-depth-classes/) 原文作者：[Jason Orendorff](https://hacks.mozilla.org/author/jorendorffmozillacom/) 原文日期：2015-07-22 继续阅读 »

深入解析 ES6：解构赋值

2015-06-28 W.Y.
ES6
什么是解构赋值？ 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁，而且比传统的属性访问更加清晰。 在不使用解构赋值的情况下，访问数组的前三项： javascript var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; 使用解构赋值后，相应的代码变得更简洁和可读： javascript var [first, second, third] = someArray; SpiderMonkey（Firefox 的 JavaScript 引擎）已经支持解构赋值的大部分特性 继续阅读 »

[译]使用基于Babel的gulp

2016-08-14 Wenjie Yao
Gulp Babel ES6 Broswerify Front-end
本文翻译自macr.ae   Babel是一个JavaScript转换编译器，它可以将ES6（下一代JavaScript规范，添加了一些新的特性和语法）转换成ES5(可以在浏览器中运行的代码)。这就意味你可以在一些暂时还不支持某些ES6特性的浏览器引擎中，使用ES6的这些特性 - 比如说，class和箭头方法。本文，我将围绕gulp和babel，介绍如何使用它们。   "使用基于Babel的gulp"其实可以有两种理解：一是使用Babel编写ES6语法的gulpfile；二是使用gulp来运行babel，让ES6编写的JavaScript代码转化成浏览器可以理解的JavaScript代码。这两种情况接下来我将一一介绍。 继续阅读 »

深入解析 ES6：Iterator 和 for-of 循环

2015-06-15 W.Y.
ES6
如何遍历一个数组的元素？在 20 年前，当 JavaScript 出现时，你也许会这样做： javascript for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 自从 ES5 开始，你可以使用内置的 forEach 方法： javascript myArray.forEach(function (value) { console.log(value); }); 代码更为精简，但有一个小缺点：不能使用 break 语句来跳出循环，也不能使用 return 语句来从闭包函数中返回。 如果有 for 继续阅读 »

深入解析 ES6：箭头函数

2015-06-28 W.Y.
ES6
从一开始箭头就是 JavaScript 的一部分，在第一个 JavaScript 中就建议将内联的脚本代码包裹在 HTML 的注释中，这可以防止那些不支持 JavaScript 的浏览器错误滴将你的代码显示为明文。你也许写过下面这样的代码： html <!-- document.bgColor = "brown"; // red // --> 古老的浏览器将看到两个不被支持的标签和一段注释，只有支持 JavaScript 的新浏览器才会将其解析为 JavaScript 代码。 为了支持这个古怪的特性，浏览器的 JavaScript 引擎把 作为一个单行注释的开始，这不是开玩笑的，这一直都是这门语言的一部分，并 继续阅读 »