프론트엔드 개발환경의 이해와 실습 2
2️⃣
🖥 바벨(Babel)
3 - 1. 바벨의 기본 개념
- 😶 배경
- 크로스브라우징의 문제를 해결하기위해 등장,
- ECMAScript2015+ 로 작성된 코드를 모든브라우저에서 일관되게 동작하도록 호환성을 지켜줌
- Typescript, JSX 처럼 다른언어로 분류되는 언어들도 브라우저에서 동작하도록 만들어줌
- 😶 설치 및 기본동작
- $ npm install @babel/core @babel/cli
- babel/cli -> 터미널 도구로 사용하기 위해서
- babel 실행방법
-
- $ node_modules/.bin/babel
-
- $ npx babel app.js(변환할 파일)
- 바벨은 코드를 변환하는 작업을 빌드라고 하는데, 세단계로 빌드를 진행한다
-
- 파싱 (Parsing) : 코드를 받아서 각 토큰별로 분해
-
- 변환 (Transforming) : 파싱 이후 변환, es6 -> es5 로 변환
-
- 출력 (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. 바벨(풀이)
-
- $npm i babel-loader -> webpack.config.js babel-loader 셋팅
-
- test:js 를 만나게되면 babel-loader / babel 을 실행하게 되는데, babel-core 필요 -> $ npm i @babel/core
-
- babel.config.js 생성 -> @babel/preset-env 를 사용하기때문에 @babel/preset-env 설치 필요 -> $ npm i @babel/preset-env
-
- $ npm run build -> main.js const=>var 로 변경됨을 확인 가능 / 그러나 promise 는 그대로 남아있음 -> 폴리필 설정 필요
-
- babel.config.js 에서 타겟브라우저설정, useBuiltIns: ‘usage’(ie가 인식하지못하는 코드가 있는부분을 임포트하는 코드를 추가), corejs/version(임포트될 라이브러리)
async await 는 corejs 로 변환할수없다 -> $ npm i regenerator-runtime
- babel.config.js 에서 타겟브라우저설정, useBuiltIns: ‘usage’(ie가 인식하지못하는 코드가 있는부분을 임포트하는 코드를 추가), corejs/version(임포트될 라이브러리)
-
- webpack.config.js babel-loader exclude 를 이용해서 node_modules 안에 파일은 적용되지 않도록 필요
3 - 5. 사스(실습)
- 사스언어 -> css 로 바뀌는 전처리 언어
3 - 6. 사스(풀이)
-
- $ npm install sass-loader node-sass
node-sass : 코드를 css 로 컴파일 해주는 역할 / sass-loader: 웹팩에서 sass 파일을 만나면 node-sass 를 내부적으로 돌려주는 역할
- $ npm install sass-loader node-sass
-
- webpack.config.js 에서 test: scss | css 변경 / use에서도 sass-loader 추가
use 는 뒤에서 부터 앞으로 실행된다 즉 sass-loader 를 만나서 css 로 변경해주고 css-loader에서 style-loader로 !
- webpack.config.js 에서 test: scss | css 변경 / use에서도 sass-loader 추가