[译] 从 CoffeeScript 迁移到 ES6

摘要：语法校验会给出警告当你仍在使用或不通过任何关键字声明变量时。但是如果脚本中还有其他的普通导出，就会得到非常奇怪的结果这个坑爹的情况目前还没有任何好的解决方案。

我在多年前爱上了coffeScript。对于javaScript，我一直保持着深沉的爱，也十分高兴得看到node.js的快速发展，但是作为一个有python背景的程序员，我更喜欢coffeeScript的简练语法。
在任何一个活跃的社区中，事物的迭代更新都是必然的，现在，我们看见了javaScript向着ES6标准的巨大进步。ES6包含了相比于CoffeeScript更多好的特性，并且通过如Babel这样的工具，我们已经可以开始着手使用他们。以下是从coffeeScript迁移到ES6的一些注意点和我的想法。

放弃空格（whitespace），重新转而使用圆括号，花括号和分号。请接受在使用ES6时，你会敲上更多的符号。不过在规范的代码格式下，它们看上去还是挺整洁的。

过去我使用的是CoffeeLint，现在我通过babel-eslint来使用ESLint。遵循Airbnb ES6 style guide这个语法风格指南。最好将你的编辑器设置成在输入或保存时进行语法检查。Atom"s eslint plugin这个语法校验插件非常不错，你可以将上面的Airbnb ES6 style guide链接中的内容，放入你的.eslintrc配置文件中。SublimeText也有类似的插件。

由于现在离对ES6的完美支持还很远，所以最好还是使用代码转换器（Transpiling），如Babel，就像在用CoffeeScript时一样。不过和CoffeeScript不同的是，这里有一些值得说明的：

1，并不是所有的ES6特性全部都可用，诸如Proxies。

2，另有一些ES6特性需要使用polyfill/runtime才可用，如Symbols，generator函数，WeakMap。一段package.json的例子：

json{
  ...
  "scripts": {
    "lint": "eslint --ext .js,.es6 src",
    "precompile": "npm run lint",
    "compile": "babel --optional runtime src --out-dir lib",
  },
  "dependencies": {
    "babel-runtime": "^5.3.3"
  },
  "devDependencies": {
    "babel": "^5.3.3",
    ...
  }
  ...
}

jsconst name = "Daniel";

// This is a compile error
name = "Kari";

// ---------
const options = {};
const items = [];

// This is *not* a compile error
options.foo = "bar";
options.baz = 5;
items.push(1);
items.push(2);

// This *is* a compile error
options = {};
items = null;

jsconst name = "World";

console.log(`Hello, ${name}!`);

Coffeesquare = (value) -> value * value

someTask (err, result) =>
  # Handle err and result

myFunc = ({source, flag}, args...) ->
  otherFunc source, args...

jsconst square = value => value * value;

someTask((err, result) => {
  // Handle err and result
});

function myFunc({source, flag}, ...args) {
  return otherFunc(source, ...args);
}

js// Instead of creating a 10000 item array, we yield each item as
// needed.
function *squares() {
  for (let n = 0; n < 10000; n++) {
    yield n * n;
  }
}

for (let square of squares()) {
  console.log(square);
}

Coffeeclass Account extends Foo
  @types = ["checking", "savings"]

  constructor: (@balance) ->

  history: (done) ->
    someLongTask (err, data) ->
      # Do something with data
      done null, data

  deposit: (amount) ->
    @balance += amount

jsclass Account extends Foo {
  constructor(balance) {
    this.balance = balance;
  }

  history(done) {
    someLongTask((err, data) => {
      // Do something with data
      done(null, data);
    });
  }

  deposit(amount) {
    this.balance += amount;
    return this.balance;
  }
}

// Currently, you can only declare functions in a class
Account.types = ["checking", "savings"];

jsclass Account {
  constructor() {
    this.balance = 0;
  }

  get underBudget() {
    return this.balance >= 0;
  }

  get overBudget() {
    return this.balance < 0;
  }
}

const myAccount = Account();
myAccount.balance = 100;
console.log(myAccount.underBudget); // => true

jsclass MyIterable {
  constructor(items) {
    this.items = items;
  }

  *[Symbol.iterator]() {
    for (let item of this.items) {
      yield `Hello, ${item}`;
    }
  }
}

const test = new MyIterable([1, 2, 3, 4, 5]);

for (let item of test) {
  console.log(item); // => Hello, 1...
}

jsimport _ from "lodash";
import {item1, item2} from "./mylib";
import * as library from "library";

//普通导出
export const name = "Daniel";

export function abc() {
  return 1;
}

export class Toaster {
  // ...
}

//匿名导出
export default function() {
  return new Toaster();
}

js// mymodule.js
// -----------
export function yes() { return true; }

// script-broken.js
// ----------------
import mymodule from "./mymodule";

// This gives an error about `undefined`!
console.log(mymodule.yes());

// script-working.js
// -----------------
import * as mymodule from "./mymodule";

console.log(mymodule.yes());

js// mymodule.js
// -----------
export function yes() { return true; }
function no() { return false; }
export default {yes, no};

// script-working.js
// -----------------
import mymodule, {yes} from "./mymodule";

console.log(mymodule.no());
console.log(yes());

// script-broken.js
// ----------------
const mymodule = require("./mymodule");

// Wat? This is an error.
console.log(mymodule.no());

// This works instead. Turns out the module is an object with a "default"
// key that contains the default export.
console.log(mymodule.default.no());