2️⃣

🖥 바벨(Babel)

3 - 1. 바벨의 기본 개념

• 😶 배경
• 크로스브라우징의 문제를 해결하기위해 등장,
• ECMAScript2015+ 로 작성된 코드를 모든브라우저에서 일관되게 동작하도록 호환성을 지켜줌
• Typescript, JSX 처럼 다른언어로 분류되는 언어들도 브라우저에서 동작하도록 만들어줌

• 😶 설치 및 기본동작
• $ npm install @babel/core @babel/cli
• babel/cli -> 터미널 도구로 사용하기 위해서
• babel 실행방법
• 1. $ node_modules/.bin/babel
• 1. $ npx babel app.js(변환할 파일)

• 바벨은 코드를 변환하는 작업을 빌드라고 하는데, 세단계로 빌드를 진행한다
• 1. 파싱 (Parsing) : 코드를 받아서 각 토큰별로 분해
• 1. 변환 (Transforming) : 파싱 이후 변환, es6 -> es5 로 변환
• 1. 출력 (Printing) : 변경된 결과물을 출력

• 바벨은 파싱과 출력을 담당하고 변환은 플러그인 이라는 다른 요소가 담당한다.
• 😶 커스텀 플러그인
• 먼저 my-babel-plugin.js 파일 생성 후 코드는 김정환님블로그
• custom plugin 을 만들때는 visitor 객체 반환 필수!
• $ npx babel –help -> 바벨 help 문서
• $ npx babel app.js(적용시킬파일명) –plugins ‘./my-babel-plugin.js’(만든 플러그인 파일 명)

• VariableDeclaration() 를 이용하여 변수 키워드(let, const)를 var 로 변경하는것도 가능하다

• 😶 플러그인 사용하기
• block-scoping : 변수키워드를 var 로 변경하는 플러그인 ( 바벨에서 제공하는 플러그인 )
• $ npm install @babel/plugin-transform-block-scoping

• arrow-functions : arrow 함수 변환
• $ npm install @babel/plugin-transform-arrow-functions

• use-strict 구문을 추가해서 엄격모드로 실행하는것이 좋다. -> strict-mode
• $ npm install @babel/plugin-transform-strict-mode

• 커멘드 명령어가 점점 길어지기때문에, babel.config.js 를 생성 후 이용

// babel.config.js
module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-strict-mode",
  ],
};

• $ npx babel app.js

• 기본적으로 babel.config.js 파일을 읽어서 플러그인을 적용 변환한 뒤 출력
• 플러그인을 일일이 설정하는것은 불가 -> 목적에 맞게 여러가지 플러그인을 세트로 모아둠 -> 프리셋

• 😶 커스텀 프리셋
• my-babel-preset.js 생성

// my-babel-preset.js
module.exports = function myBabelPreset(){
    return {
      plugins: [
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-strict-mode",
      ],
    };
}

// babel.config.js
module.exports = {
    presets: [
        './my-babel-preset.js'
    ]
};

• 위는 이전과 똑같은 결과를 얻는다. ( 잘 작동한다. )

3 - 2. 바벨 사용법과 웹팩 통합

• 😶 프리셋 사용하기
• preset-env / preset-flow / preset-react / preset-typescript
• preset-env : ECMAScript2015+ 변환할때 사용
• $ npm i @babel/preset-env

// babel.config.js
module.exports = {
    presets: [
        '@babel/preset-env'
    ]
};

• 😶 타겟 브라우져
• preset을 사용할때 변환하는 코드는 특정브라우져를 지원해야한다는 설정을 할 수 있다.

// babel.config.js
module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79',
                ie: '11'
            }
        }]
    ]
};

• chrome 과 ie 에 모두 작동하는 코드여야 해서 const -> let / arrow -> function
• chrome만 적었을때는 기존 const, arrow 그대로 남아있었다.

• 😶 폴리필
• 플러그인이 프라미스를 ECMAScript5 버전으로 변환할 것으로 예상했지만, 그렇지 않았다.
• 바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다.
• 그렇지 못한 것들은 “폴리필”이라고 부르는 코드조각을 추가해서 해결한다.
• preset-env 에는 타겟브라우져 뿐만아니라 폴리필을 사용할지 말지에 대해서도 설정 가능

// babel.config.js
module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79',
                ie: '11'
            },
            useBuiltIns: 'usage', // 'entry', false 정확한 이유는 모르지만 결과값은 다르게 나온다고 한다.
            corejs: {
                version: 2 // 가장 최근 버전은 3 이지만 문서는 2를 따랐기때문에 
            }
        }]
    ]
};

• 😶 웹팩으로 통합하는 방법
• 실무에서는 바벨을 직접 터미널로 빌드하기보다는 웹팩으로 통합하여 사용하는것이 일반적
• babel-loader 사용 : $ npm i babel-loader

// webpack.config.js
module.exports = {
    //...
  module: {
    rules: [
        //...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/ // node_modules 라이브러리는 처리하지 않도록 제외
      }
    ],
  },
};

• loader 이기 때문에 rules 에 추가해주고, entry 포인트가 달라졌기때문에 ‘./app.js’ 로 변경해주었다.
• 이후 $ npm run build 했을때 오류가 발생한것을 알수있는데, corejs 를 node_modules에서 찾을수없기때문이다.
• 그렇기때문에 corejs 를 설치해준다.
• $ npm i core-js@2 (특정 버전 설치를 원할때는 @ 를 붙여준다.)

3 - 4. 바벨(풀이)

• 1. $npm i babel-loader -> webpack.config.js babel-loader 셋팅
• 1. test:js 를 만나게되면 babel-loader / babel 을 실행하게 되는데, babel-core 필요 -> $ npm i @babel/core
• 1. babel.config.js 생성 -> @babel/preset-env 를 사용하기때문에 @babel/preset-env 설치 필요 -> $ npm i @babel/preset-env
• 1. $ npm run build -> main.js const=>var 로 변경됨을 확인 가능 / 그러나 promise 는 그대로 남아있음 -> 폴리필 설정 필요
• 1. babel.config.js 에서 타겟브라우저설정, useBuiltIns: ‘usage’(ie가 인식하지못하는 코드가 있는부분을 임포트하는 코드를 추가), corejs/version(임포트될 라이브러리)

     async await 는 corejs 로 변환할수없다 -> $ npm i regenerator-runtime

• 1. webpack.config.js babel-loader exclude 를 이용해서 node_modules 안에 파일은 적용되지 않도록 필요

3 - 5. 사스(실습)

• 사스언어 -> css 로 바뀌는 전처리 언어

3 - 6. 사스(풀이)

• 1. $ npm install sass-loader node-sass

     node-sass : 코드를 css 로 컴파일 해주는 역할 / sass-loader: 웹팩에서 sass 파일을 만나면 node-sass 를 내부적으로 돌려주는 역할

• 1. webpack.config.js 에서 test: scss | css 변경 / use에서도 sass-loader 추가

     use 는 뒤에서 부터 앞으로 실행된다 즉 sass-loader 를 만나서 css 로 변경해주고 css-loader에서 style-loader로 !