이번에는 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

이번 코드
htps : // 기주 b. 코 m/교로히로/도 c. 오 dゔ ㄱ t. sc 등

MORE

네, 여러 가지 Google을보십시오.
htps //w w. 오, ぇ. 이. jp/세아 rch? q=에스2015

손을 움직여보세요. 이해가 진행된다고 생각합니다.

htp // 바베 ljs. 이오/
htp : ///코코엔라에 ts. 기주 b. 이오 / 에 s6 - 쓰리 아 l /
htps // 바베 ljs. 이오

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 (게임 프로그램 시작)