今回は Babel を触ってみましょう。 Babel は、もっともモダンな JavaScript を
現在のブラウザー向けのレガシーな JavaScript に変換するツールです。
Scratch3.0 で利用されています。

なぜ Babel

なぜ、ここで、Babel を取り上げるのか?
一つには、Scratch で利用されているからです。 Babel を使えたほうがコードが読みやすい。当然のことです。

それ以上に、感じて欲しいのが、 Scratchのコードに流れる感覚です。
より、モダンで洗練された物を作ろうとする。
そういった感覚です。

Scratch は、子供向けかも知れません。しかし、その根底流れるものは、
子供騙しではありません。

Babelとは

Babel は、もっともモダンな JavaScript を
現在のブラウザー向けのレガシーなJavaScriptに変換するツールです。

Babel x Webpack で Hello World

package.json を作成する

1. mkdir babel01
2. cd babel01
3. npm init -f

babel と webpack をインストール

4. npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015

webpack の Hello World を書く

5. emacs webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

6. mkdir src
7. emacs src/index.js

console.log("Hello, World!!");

8. webpack

- 9. node dist/bundle.js

Hello, World!!

Babel で Hello World!!

10. emacs webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      include: path.resolve(__dirname, 'src'),
      query: {
        presets: ['es2015']
      }
    }]
  },
};

11. emacs src/index.js

class HelloWorld {
    hello() {
        console.log("Hello, World!!");
    }
}

var helloWorld = new HelloWorld();
helloWorld.hello();

12. webpack

- 13. node dist/bundle.js

Hello, World!!

PS

今回のコード
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/babel01

はい、色々 Googleして見てください。
https://www.google.co.jp/search?q=es2015

手を動かして見てください。理解が進むと思います。

http://babeljs.io/
http://ccoenraets.github.io/es6-tutorial/
https://babeljs.io/learn-es2015/

PS

次回

続く

以下の場所でも、アレコレ書いていきます。

火の型 With Scratch 2.0 (プログラム入門) 　第00巻
 火の型 With Scratch 2.0 (プログラム入門) 　第01巻
 炎の型 With Scratch 2.0 (ゲームプログラム入門)

Scratch 3.0 を Hackしよう。Babel を触ってみよう