技術探し

JavaScriptを中心に記事を書いていきます :;(∩´﹏`∩);:

次のリリースであるBabel7の主な変更点まとめ

Babel7がリリースされるまでは更新されます。

注意: 量が多いので、BabelのInternal, Bug Fix, DocumentsとBabylonについては書きません。
また6.xへバックポートされたものも入っていますので注意してください。

もし、間違えや質問があれば、 @about_hiroppy までどうぞ;)

Index


Links

Milestone

Babel 7 Beta Milestone · GitHub

Wiki

Babel 7 · babel/babel Wiki · GitHub

Releases

Releases · babel/babel · GitHub

Revision History of This Article

2017/09/04(first)

Babelのstableがv6.26.0でプレリリースがv7.0.0-alpha.20です。
Babylonのv7.0.0-beta.22です。

The branches in babel have been moved. The previous master is now called 6.x, and the 7.0 branch is now master. Pull requests need to be based on master from now on. (2017/9/1)

masterブランチが7.0になったためここにまとめたいと思います。


Notable Changes

Babel

  • TypeScriptのサポート
  • .babelrc.jsのサポート
  • spread-operatorが仕様準拠となる
  • stageパッケージの追加と変動

Packages Status of Stage-X

従来通り、数値以上のパッケージはそこにすべて含まれます。

Tracking for Spec

github.com

stage-3

  • babel-plugin-syntax-dynamic-import(new)
  • babel-plugin-transform-async-generator-functions
  • babel-plugin-transform-class-properties(new)
  • babel-plugin-transform-object-rest-spread
  • babel-plugin-transform-optional-catch-binding(new)
  • babel-plugin-transform-unicode-property-regex(new)

stage-2

  • babel-plugin-transform-export-namespace
  • babel-plugin-transform-function-sent(new)
  • babel-plugin-transform-numeric-separator(new)
  • babel-preset-stage-3

stage-1

  • babel-plugin-transform-decorators
  • babel-plugin-transform-export-default
  • babel-plugin-transform-optional-chaining(new)
  • babel-preset-stage-2

stage-0

  • babel-plugin-transform-do-expressions
  • babel-plugin-transform-function-bind
  • babel-preset-stage-1

Flow

  • Object typeに対し、speadが使用可能になる
  • declare exportが使用可能になる
  • predicatesエイリアスサポート
  • opaqueエイリアスサポート

babel-preset-env

polyfillを動的に入れてくれるようになる


Details of Changes

Babel

babel-preset-es2015

specモード時に変換されたアロー関数に名前が付与される

// input
return {
  g: () => this
}

// output
return {
  g: function g() {
    babelHelpers.newArrowCheck(this, _this);
    return this;
  }.bind(this)
}
Related Plugins

babel-plugin-transform-es2015-arrow-functions

Versions

v7.0.0-alpha.10

PRs

Add function name to spec-transformed arrow functions by Kovensky · Pull Request #5620 · babel/babel · GitHub

check-es2015-constantsが仕様準拠となる

constコンパイル時にエラーではなく、その前にthrowが追加されました。

Related Plugins

babel-plugin-check-es2015-constants

Versions

v7.0.0-alpha.17, 20

PRs

配列でのfor-ofの最適化

Related Plugins

babel-plugin-transform-es2015-for-of

Versions

v7.0.0-alpha.15

PRs

test for for-of optimization on arrays and add it for array type anno… by hzoo · Pull Request #4747 · babel/babel · GitHub

looseモードでのClassCallCheckpossibleConstructorReturnが削除

Related Plugins
  • babel-helpers
  • babel-plugin-transform-es2015-classes
  • babel-plugin-transform-flow-comments
  • babel-plugin-transform-flow-strip-types
Versions

v7.0.0-alpha.15

PRs

Remove ClassCallCheck, possibleConstructorReturn in loose mode by hzoo · Pull Request #4850 · babel/babel · GitHub

looseモードにes2015-parametersが追加

argumentsを使用しません。

Related Plugins

babel-plugin-transform-es2015-parameters

Versions

v7.0.0-alpha.17

PRs

2nd try: Add loose option for es2015-parameters transformation by maurobringolf · Pull Request #5943 · babel/babel · GitHub

looseモードにclass-fieldsが追加

Object.definePropery を使わずに代入式でコンパイルされます。

var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  this.x = 'bar';
  this.y = void 0;
};
 
Bork.a = 'foo';
Bork.b = void 0;
Related Plugins

babel-plugin-transform-class-properties

Versions

v7.0.0-alpha.20

PRs

Update Class Fields to Stage 3 and change default behavior by kedromelon · Pull Request #6076 · babel/babel · GitHub

template-literalsはデフォルトでconcatを使用し、looseモードでは+を使用する

Related Plugins

babel-plugin-transform-es2015-template-literals

Versions

v7.0.0-alpha.20

PRs

default to spec mode for template literal transform by kedromelon · Pull Request #6098 · babel/babel · GitHub

spread-operatorが仕様準拠となる

// Invalid
( {...{}} = {} ); ( {...[]} = {} );
var { ...{ z } } = { z: 1 };
({ x, ...{ y, z } } = o);

// valid
let {...{}} = {}; let {...[]} = {};
let { ...z } = { z: 1 };
({ x, y, ...z } = o);

May 23, 2017 Meeting Notes

Related Plugins
  • babel-plugin-transform-es2015-destructuring
  • babel-plugin-transform-object-rest-spread
Versions

v7.0.0-alpha.20

PRs

Adjusted Object Rest/Spread tests to use only allowed syntax from the… by Andarist · Pull Request #6102 · babel/babel · GitHub

babel-preset-stage-3

stage-3からstage-4のプラグインが削除

Versions

v7.0.0-alpha.1

PRs

[7.0] Remove stage 4 plugins from stage 3 preset by varemenos · Pull Request #5126 · babel/babel · GitHub

dynamic-importの追加

for (const link of document.querySelectorAll('nav > a')) {
  link.addEventListener('click', e => {
    e.preventDefault();

    import(`./section-modules/${link.dataset.entryModule}.js`)
      .then(module => module.loadPageInto(main))
      .catch(err => main.textContent = err.message);
  });
}
Related Plugins

babel-plugin-syntax-dynamic-import

Versions

v7.0.0-alpha.8

PRs

Move syntax-dynamic-import to stage-3 by dkaoster · Pull Request #5610 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-dynamic-import: import() proposal for JavaScript

optional-catch-bindingの追加

try {} catch {}
try {
  bar;
} catch {
  foo();
} finally {
  yay();
}
Related Plugins

babel-plugin-transform-optional-catch-binding

Versions
  • v7.0.0-alpha.17
  • v7.0.0-alpha.18
PRs
Spec

Optional catch binding

class-fieldsの追加

class Bork {
  static a = 'foo';
  static b;
 
  x = 'bar';
  y;
}

looseモードの指定がない場合、コンパイル時に代入式からObject.defineProperyを使うように変更されました。

Related Plugins

babel-plugin-transform-class-properties

Versions

v7.0.0-alpha.20

PRs

Update Class Fields to Stage 3 and change default behavior by kedromelon · Pull Request #6076 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-class-fields: Orthogonally-informed combination of public and private fields proposals

transform-unicode-property-regexの追加

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π'); // true
Related Plugins

babel-plugin-transform-unicode-property-regex

Versions
  • v7.0.0-alpha.1
  • v7.0.0-alpha.15
PRs
Spec

GitHub - tc39/proposal-regexp-unicode-property-escapes: Proposal to add Unicode property escapes `\p{…}` and `\P{…}` to regular expressions in ECMAScript.

babel-preset-stage-2

function.sentの追加

function* generator() {
  console.log('Sent', function.sent);
  console.log('Yield', yield);
}
 
const iterator = generator();
iterator.next(1); //  Sent 1
iterator.next(2); // Yield 2
Related Plugins
  • babel-helper-wrap-function
  • babel-plugin-transform-function-sent
Versions

v7.0.0-alpha.17

PRs

Function sent by nicolo-ribaudo · Pull Request #5920 · babel/babel · GitHub

Spec

ESideas/Generator metaproperty.md at master · allenwb/ESideas · GitHub

export-default-fromの追加

export var v;
export * as ns from 'mod';
export v, {x, y as w} from 'mod';
Related Plugins
  • babel-plugin-transform-export-default
  • babel-plugin-transform-export-namespace
Versions

v7.0.0-alpha.20

PRs
Spec

GitHub - tc39/proposal-export-default-from: Proposal to add `export v from "mod";` to ECMAScript.

numeric-separatorの追加

1_000_000_000  // Ah, so a billion
101_475_938.38  // And this is hundreds of millions

let fee = 123_00;   // $123 (12300 cents, apparently)
let fee = 12_300;   // $12,300 (woah, that fee!)
let amount = 12345_00;  // 12,345 (1234500 cents, apparently)
let amount = 123_4500;  // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500

let budget = 1_000_000_000_000;
// What is the value of `budget`? It's 1 trillion!

console.log(budget === 10 ** 12); // true
Related Plugins

babel-plugin-transform-numeric-separator

Versions

v7.0.0-alpha.20

PRs

Add numeric separator to stage 2 preset by rwaldron · Pull Request #6071 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-numeric-separator: A proposal to add numeric literal separators in Javascript. https://tc39.github.io/proposal-numeric-separator/

babel-preset-stage-1

optional-chaining-operatorの追加

abouthiroppy.hatenablog.jp

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if `bar` exists
Related Plugins

babel-plugin-transform-optional-chaining

Versions

v7.0.0-alpha.15

PRs

Optional Chaining Operator (Stage 1) by jridgewell · Pull Request #5813 · babel/babel · GitHub

Spec

GitHub - tc39/proposal-optional-chaining

babel-plugin-transform-class-properties

configurableプロパティの追加

Object.defineProperty(REF, KEY, {
  configurable: true,
  enumerable: true,
  writable: true,
  value: VALUE
});
Versions

v7.0.0-alpha.20

PRs

Add 'configurable' property to class fields by reznord · Pull Request #6123 · babel/babel · GitHub

babel-polyfill

それぞれの機能のポリフィルファイルを個別に追加

Versions

v7.0.0-alpha.7

PRs

add individual polyfill files by hzoo · Pull Request #5584 · babel/babel · GitHub

babel-cli

--inspect-brkオプションの追加

Node7.6で入ったオプションです。

Versions

v7.0.0-alpha.11

PRs

Allow --inspect-brk option to be used with babel-node by noinkling · Pull Request #5785 · babel/babel · GitHub

--config-fileオプションの追加

.babelrcのパスを渡すオプションです。

Versions

v7.0.0-alpha.20

PRs

add --config-file option to CLI to pass in .babelrc location by bdwain · Pull Request #6133 · babel/babel · GitHub

babel-plugin-transform-runtime

useBuiltInsuseESModulesオプションの追加

Versions

v7.0.0-alpha.3

PRs

Add useBuiltIns and useESModules options to transform-runtime by Kovensky · Pull Request #5442 · babel/babel · GitHub

babel-core

babelの環境変数が取得できるようになった

Versions

7.0.0-alpha.3

PRs

Export Babel's environment by xtuc · Pull Request #5448 · babel/babel · GitHub

babel-register

キャッシュディレクトリを見つけ、作成する

Versions

v7.0.0-alpha.10

PRs

Find cache dir by pwmckenna · Pull Request #5669 · babel/babel · GitHub

Flow

Object typeに対し、speadが使用可能に

type U = {};
type V = {};
type T = { ...U };
type T = { ...U, ...V, };
type T = { p: V, ...U, };
type T = { ...U, p: V, };
type T = { ...{} | { p: V } };
Versions

v7.0.0-alpha.10

PRs

Add support for object type spread by conartist6 · Pull Request #5525 · babel/babel · GitHub

declare exportが使用可能に

declare export var foo;
declare export function foo(): void;
declare export function foo<T>(): void;
declare export function foo(x: number, y: string): void;
declare export class A<T> extends B<T> { x: number }
declare export class A { static foo(): number; static x : string }
declare export class A mixins B<T>, C {}
declare export default function foo(): void;
declare export * from 'asd';
declare export { a, b };
declare export { c, d } from 'bar';
Versions

v7.0.0-alpha.15

PRs

Support declare export statements by danez · Pull Request #5589 · babel/babel · GitHub

predicatesエイリアスサポート

declare function foo(x: mixed): boolean %checks(x !== null);

function is_string(x): boolean %checks {
  return typeof x === "string";
}
Versions

v7.0.0-alpha.17

PRs

Add support for flow predicates in babel-generator by existentialism · Pull Request #5984 · babel/babel · GitHub

opaqueエイリアスサポート

opaque type ID = string;
opaque type Foo<T> = Bar<T>;
opaque type Maybe<T> = _Maybe<T, *>;
export opaque type overloads =
  & ((x: string) => number)
  & ((x: number) => string)
;

medium.com

Versions

v7.0.0-alpha.18

PRs

Flow opaque type aliases by jbrown215 · Pull Request #5990 · babel/babel · GitHub

babel-preset-reactはflowアノテーションがあるときのみflowの処理するように変更

TypeScriptとの互換性を持つためにbabel-preset-reactからflowのサポートはなくなります。

Versions
  • v7.0.0-alpha.19
  • v7.0.0-alpha.20
PRs

その他使用者向け

Node 0.12のサポートが切られました

Versions

v7.0.0-alpha.1

PRs

Drop support for Node 0.12 :skull: by siddharthkp · Pull Request #5025 · babel/babel · GitHub

.babelrc.jsがサポートされました

Versions

v7.0.0-alpha.2

PRs

Add support for .babelrc.js files by kaicataldo · Pull Request #4892 · babel/babel · GitHub

.babelrc.jsで関数使用の許可・キャッシュ

Versions

v7.0.0-alpha.8

PRs

Cache configs based on mtime and allow .babelrc.js functions by loganfsmyth · Pull Request #5608 · babel/babel · GitHub

.babelignoreで否定パターンが使えるようになる

Versions

v7.0.0-alpha.8

PRs

Allow negation of ignore and only patterns. by loganfsmyth · Pull Request #5625 · babel/babel · GitHub

babel-plugin-transform-new-targetの追加

Versions

v7.0.0-alpha.15

PR・Issue

TypeScriptのサポート

{
  "presets": ["typescript"]
}
Related Plugins
  • babel-plugin-syntax-typescript
  • babel-plugin-transform-typescript
  • babel-preset-typescript
Versions
  • v7.0.0-alpha.18
  • v7.0.0-alpha.19
  • v7.0.0-alpha.20
PRs

その他開発者向け

for-awaitは新しいASTに変更

// new forOfStatement
t.forOfStatement(left, right, body, await) // @param {boolean} await - default: false
Versions

v7.0.0-alpha.1

PRs

Change for-await to use new AST by danez · Pull Request #5321 · babel/babel · GitHub

babel-traverseにString.rawの追加

Versions

v7.0.0-alpha.15

PRs

Add support for evaluating `String.raw` expressions by josephfrazier · Pull Request #5681 · babel/babel · GitHub

babel-standaloneがbabelレポへ移動

github.com

Versions

v7.0.0-alpha.20

PRs

Move babel-standalone into main Babel repo by Daniel15 · Pull Request #6029 · babel/babel · GitHub

babel-preset-env

useBuiltInsオプションの変更

以前はfalseでbooleanでしたが、"usage""entry"falseへ変更されました。
useBuiltInsというオプションはbabel-polyfillを入れるかどうかオプションです。
これにより、import 'babel-polyfill' が必要なくなります。

FYI: GitHub - babel/babel-preset-env at 2.0

Versions

v2.0.0-alpha.6

PRs

make useBuiltIns: false default, rename true to 'usage' by hzoo · Pull Request #285 · babel/babel-preset-env · GitHub

Website

REPLがreplaceされた

Babel · The compiler for writing next generation JavaScript


In Progress

Babel

decoratorsのアップデート

class Foo {
  @dec1 method1() {}
  @dec2(a, b, c) method2() {}
  @dec3outer @dec3inner method3() {}
  undecorated() {}
}

elementDescriptor`というspecの概念の追加等

Versions

N/A

PRs

Decorators 2 Transform [WIP] by peey · Pull Request #6107 · babel/babel · GitHub

Spec

現在stage-2
Decorators

bigIntの追加

(1073741824n ** 2n).toString() === (new BigInt('1152921504606846976')).toString()
Versions

N/A

PRs

BigInt (Stage 2) [WIP] by wdhorton · Pull Request #6015 · babel/babel · GitHub

Spec

現在stage-3(PRの段階では2ですが現在3)
GitHub - tc39/proposal-bigint: Arbitrary precision integers in JavaScript

Babylon

Pattern Matchingの追加

let getLength = vector => match (vector) {
  { x, y, z }: Math.sqrt(x ** 2 + y ** 2 + z ** 2),
  { x, y }:    Math.sqrt(x ** 2 + y ** 2),
  [...]:       vector.length,
  else: {
    throw new Error("Unknown vector type");
  }
};
Versions

N/A

PRs

WIP Pattern Matching (Stage 0) by krzkaczor · Pull Request #635 · babel/babylon · GitHub

Spec

現在stage-0
GitHub - tc39/proposal-pattern-matching: Pattern matching syntax for ECMAScript

classへprivate methodsのサポート

class Counter extends HTMLElement {
  #xValue = 0;

  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }

  connectedCallback() {
    this.#render();
  }

  #render() {
    this.textContent = this.#x.toString();
  }
}
Versions

N/A

PRs

Add support for class private methods by Qantas94Heavy · Pull Request #703 · babel/babylon · GitHub

Spec

現在stage-2
GitHub - tc39/proposal-private-methods: Private methods and getter/setters for ES6 classes