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

babel.png

https://babeljs.io/

なぜ 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

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 (ゲームプログラム入門)

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.