바벨, webpack[패스트캠퍼스 챌린지 23일차]

Babel

바벨?

ECMAScript2015(ES6)+ 코드를 이전 자바스크립트 엔진에서 실행할 수 있는 이전 버전과 호환되는 JS버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JS 트랜스 컴파일러

바벨 설치하는 방법

npm i -D @babel/core @babel/preset-env

두 개의 패키지 설치

루트 경로에 .babelrc.js 파일 생성

내부에 Node.js의 내보내기 작성

mudule.exports = {
    presets: ['babel/preset-env']
}

: 앞으로 작성하는 모든 JS는 바벨을 통해 ES5의 문법으로 변경되어 브라우저에서 동작

package.json에 옵션 추가

"browserlist" : [
    ">1%",
    "last 2 versions"
]

어디서 많이 봤지.

postcss할 때 추가한 옵션이랑 같으니까

이미 작성해놓은 게 있으면 그걸로 겸용하면 되고,

적용한 적 없으면 위의 옵션 추가해주면 됨.

---

비동기함수 async

영화 관련 수업했을 때 나옴

async function test() {
    const promise = Promise.resolve(123) 
    console.log(await promise) //키워드와 변수
}
test() //호출

→ 여기서 중요한 건 로직 아님

레퍼런스 에러 뜸

regeneratorRuntime is not defined

왜냐?

babel이 async, await를 기본으로 제공하지 않아서임.

자, 이제 이 두 녀석을 사용하기 위해

npm i -D @babel/plugin-transform-runtime 설치

async, await가 정상적으로 동작하는지 확인하고 싶잖아.

이때 필요한 플러그인을 설치한 거임

설치 후 .babelrc.js에 내용 하나 더 추가

module.exports = {
    presents :['@babel/preset-env'],
    plugins : [
        ['@babel/plugin-transform-runtime']
    ] //중첩 내부 배열
}

---

webpack

프로젝트 생성

npm init -y

npm i -D webpack webpack-cli webpack-dev-server@next

세 개의 패키지 설치

webpack : 번들러가 동작하기 위한 핵심적인 패키지

webpack-cli : 터미널에서 입력하는 여러 명령들 CLI를 지원하는 패키지

webpack-dev-server : 개발서버를 오픈할 때 좀 더 개발에 특화돼서 페이지들을 바로바로 새로고침해줄수 있는 구조를 만들어주는 패키지

package.json에 스크립트 수정

"scripts" : {
    "dev" : "webpack-dev-server --mode development",
    "build" : "webpack --mode production"
}

루트 경로에 webpack.config.js 파일 만들기

여기에 webpack의 기본적인 구성 옵션들을 지정해주면 됨

---

entry, output

entry : 파일을 읽어들이기 시작하는 진입점을 설정하는 옵션
output : 결과물(번들)을 반환하는 설정

브라우저 환경이 아닌 Node.js 환경에서 작동하기 때문에 import/export가 아니라 require/module.exports

const path = require('path')

module.exports = {
    entry: './js/main.js'
    output: {
        //path: path.resolve(__dirname, 'dist'),
        //filename: 'main.js',
        clean: true
    }
}

path는 전역 모듈. 따로 설치할 필요가 없다

output.path 에서 주의해야할 게, 절대 경로로 명시해줘야 함. 상대경로는 노노

resolve(1번인수, 2번인수) 메서드는 1번째 인수와 2번째 인수의 경로를 합쳐주는 역할을 함

__dirname는 현재 파일이 있는 그 경로를 지칭함

output.clean:true 기존에 만들었던 내용을 제거해줌

entry와 output 작성 후 npm run build 하면?

dist 폴더가 생기고 그 안에 main.js 들어가 있음

주석처리해놓은 부분 켜나 안 켜나 결과는 같은데,

path나 파일 이름 바꾸고 싶으면 주석 해제하고 원하는 경로와 파일이름 명시해주면 된다

---

아니..
왜...
항상 새롭냐고 ㅠㅠ

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online