Scratch 3.0 自分専用機 を作ろう!! (9) Babel を触ってみよう

on
By kyorohiro (河村潔広)

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


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して見てください。

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





Comments

Post a Comment