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

今回は 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
• 1. cd babel01
• 1. npm init -f

babel と webpack をインストール

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

webpack の Hello World を書く

• 1. emacs webpack.config.js

const path = require('path');

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

• 1. mkdir src
• 1. emacs src/index.js

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

• 1. webpack
• 1. node dist/bundle.js

Hello, World!!

Babel で Hello World!!

• 1. 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']
      }
    }]
  },
};

• 1. emacs src/index.js

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

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

• 1. webpack
• 1. node dist/bundle.js

Hello, World!!

PS

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

MORE

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

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

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

PS

次回

続く

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

Scratch3.0 自分専用機 を作ろう!! (0)
Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう
Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)
Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)
Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)
Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは)
Scratch 3.0 自分専用機 を作ろう!! (6) Scratch3.0 の package.jsonを読んでみよう
Scratch 3.0 自分専用機 を作ろう!! (7) scratch-gui を インストールしてみよう
Scratch 3.0 自分専用機 を作ろう!! (8) scratch-vm に利用されている、scratch-xxx を触ってみよう
Scratch 3.0 自分専用機 を作ろう!! (9) Babel を触ってみよう

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