Edited at
ScratchDay 9

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

More than 1 year has passed since last update.

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