Babel & TypeScript & Webpack
1. Babel
-
Transpiler, Compiler 역할
-
언어 ⇒ 언어 변환
-
특정 문법 등을 Javascript Code로 바꿔줌
ex) Optional Chaning (최신문법을 과거 문법으로)
//Put in next-gen JavaScript - Optional Chaning
const city = address?.city
//Get browser-compatible JavaScript out
"use strict";
var _address;
const city = (_address = address) === null || _address === void 0 ? void 0 : _address.city;
-
Plugin
-
각각의 문법마다 플러그인이 존재
ex) 위 Optional Chaining 사용시 @babel/plugin-proposal-optional-chaining
설치
ex) @babel/plugin-proposal-class-properties
-
Preset
-
plugin을 모아서 제공 (왜냐면 하나하나 설정해주기 귀찮으니까)
ex) @babel/preset-env
: plugin 모아 특정 환경으로 타겟팅 해줌
// target - caniuse
{
"targets": {
"chrome": "58",
"ie": "11"
}
}
-
JavaScript 표준 만드는 방법
- 문법의 정의한다
- Babel Plugin을 만든다
- tc39 organization에 제출 (proposal)
-
어떻게 사용 ?
- babel-plugin-lodash - 번들 사이즈 줄여주는 플러그인
- JSX
2. TypeScript (TSC)
-
Transpiling → Babel로 대체 (babel-plugin-typescript)
- TypeScript → JavaScript
- 대체 시 Type Checking 기능 없음
-
Type Checking
-
타입이 맞는지 아닌지 체크?
ex) tsc —moEmit
-
Language Server
tsc
를 돌리지 않아도 VS Code에서 빨간줄을 볼수있는 이유
-
결론
-
레버리징 : 지렛대를 이용함?
- 이 주식이 백퍼 오른다!
- 내가 가진 돈이 100만원
- 1%
- 101만원
- 은행에 가서 1억을 땡겨
- 1억 100만원
- 1억 201만원
- 오픈소스 레버리징
- 내가 어떤 생태계에 속해있어야 하나??
- yarn add 를 하는 순간 레버리징을 하는거다!
-
TypeScript로 타입 체킹 + Babel로 Transpile —> 지속적 개선을 위해
3. Webpack
-
여러 파일(모듈)들을 한 파일로 뭉쳐준다.
-
파일 → Loader → Webpack → 후처리 Plugin
-
TypeScipt 적용 → ts loader 설치 - .ts로 끝나는 파일 설정해줌
-
JavaScript 관련된건 Babel Loader를 주로 쓴다!
-
Q. svg 파일을 읽고 싶다.
-
import ... from './hello/world/something.svg'
-
svg → 경로로 읽고싶다!
ex) url-loader
-
svg → string으로 읽고싶다!
ex) raw-loader
-
svg → React 컴포넌트로 읽고싶다.
ex) @svgr/webpack
-
결론적으로, 내가 뭔가 특이한걸 import 하고 싶다!
-
엑셀을 읽고싶다.
ex) xlsx-loader
-
CRA로 할때 (eject 안하고 사용하는 경우)
-
react-app-rewired
+ customize-cra
$ yarn add customize-cra --dev
$ yarn add react-app-rewired --dev
package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 react-app-rewired를 통해 실행
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
},
프로젝트 가장 최상단 위치에서 config-overrides.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다.
config-overrides.js 를 작성하기 전에, decorator 문법을 사용하기 위해 필요한 패키지를 설치
$ yarn add --dev @babel/plugin-proposal-decorators
아래와 같이
const {
addDecoratorsLegacy,
disableEsLint,
override
} = require("customize-cra");
module.exports = {
webpack: override(
disableEsLint(),
addDecoratorsLegacy()
)
};
customize-cra가 지원해주는 addDecoratorsLegacy 를 통해 decorator문법을 사용할 수 있게 되었다.
mobx-react의 observer decorator를 App.js에 적용해 볼 것이다.
customize-cra 문서에서 disableEsLint 플러그인을 같이 사용하라고 나타나있기 때문에 설정파일에 명시하였다.
-
craco
Author And Source
이 문제에 관하여(Babel & TypeScript & Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ggombee/Babel-TypeScript-Webpack
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Transpiler, Compiler 역할
-
언어 ⇒ 언어 변환
-
특정 문법 등을 Javascript Code로 바꿔줌
ex) Optional Chaning (최신문법을 과거 문법으로)
//Put in next-gen JavaScript - Optional Chaning const city = address?.city //Get browser-compatible JavaScript out "use strict"; var _address; const city = (_address = address) === null || _address === void 0 ? void 0 : _address.city;
Plugin
-
각각의 문법마다 플러그인이 존재
ex) 위 Optional Chaining 사용시
@babel/plugin-proposal-optional-chaining
설치ex)
@babel/plugin-proposal-class-properties
Preset
-
plugin을 모아서 제공 (왜냐면 하나하나 설정해주기 귀찮으니까)
ex)
@babel/preset-env
: plugin 모아 특정 환경으로 타겟팅 해줌// target - caniuse { "targets": { "chrome": "58", "ie": "11" } }
JavaScript 표준 만드는 방법
- 문법의 정의한다
- Babel Plugin을 만든다
- tc39 organization에 제출 (proposal)
어떻게 사용 ?
- babel-plugin-lodash - 번들 사이즈 줄여주는 플러그인
- JSX
-
Transpiling→ Babel로 대체 (babel-plugin-typescript)- TypeScript → JavaScript
- 대체 시 Type Checking 기능 없음
-
Type Checking
-
타입이 맞는지 아닌지 체크?
ex) tsc —moEmit
-
Language Server
tsc
를 돌리지 않아도 VS Code에서 빨간줄을 볼수있는 이유
-
-
결론
-
레버리징 : 지렛대를 이용함?
- 이 주식이 백퍼 오른다!
- 내가 가진 돈이 100만원
- 1%
- 101만원
- 은행에 가서 1억을 땡겨
- 1억 100만원
- 1억 201만원
- 오픈소스 레버리징
- 내가 어떤 생태계에 속해있어야 하나??
- yarn add 를 하는 순간 레버리징을 하는거다!
-
TypeScript로 타입 체킹 + Babel로 Transpile —> 지속적 개선을 위해
-
3. Webpack
-
여러 파일(모듈)들을 한 파일로 뭉쳐준다.
-
파일 → Loader → Webpack → 후처리 Plugin
-
TypeScipt 적용 → ts loader 설치 - .ts로 끝나는 파일 설정해줌
-
JavaScript 관련된건 Babel Loader를 주로 쓴다!
-
Q. svg 파일을 읽고 싶다.
-
import ... from './hello/world/something.svg'
-
svg → 경로로 읽고싶다!
ex) url-loader
-
svg → string으로 읽고싶다!
ex) raw-loader
-
svg → React 컴포넌트로 읽고싶다.
ex) @svgr/webpack
-
결론적으로, 내가 뭔가 특이한걸 import 하고 싶다!
-
엑셀을 읽고싶다.
ex) xlsx-loader
-
CRA로 할때 (eject 안하고 사용하는 경우)
-
react-app-rewired
+ customize-cra
$ yarn add customize-cra --dev
$ yarn add react-app-rewired --dev
package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 react-app-rewired를 통해 실행
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
},
프로젝트 가장 최상단 위치에서 config-overrides.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다.
config-overrides.js 를 작성하기 전에, decorator 문법을 사용하기 위해 필요한 패키지를 설치
$ yarn add --dev @babel/plugin-proposal-decorators
아래와 같이
const {
addDecoratorsLegacy,
disableEsLint,
override
} = require("customize-cra");
module.exports = {
webpack: override(
disableEsLint(),
addDecoratorsLegacy()
)
};
customize-cra가 지원해주는 addDecoratorsLegacy 를 통해 decorator문법을 사용할 수 있게 되었다.
mobx-react의 observer decorator를 App.js에 적용해 볼 것이다.
customize-cra 문서에서 disableEsLint 플러그인을 같이 사용하라고 나타나있기 때문에 설정파일에 명시하였다.
-
craco
Author And Source
이 문제에 관하여(Babel & TypeScript & Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ggombee/Babel-TypeScript-Webpack
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
여러 파일(모듈)들을 한 파일로 뭉쳐준다.
파일 → Loader → Webpack → 후처리 Plugin
-
TypeScipt 적용 → ts loader 설치 - .ts로 끝나는 파일 설정해줌
-
JavaScript 관련된건 Babel Loader를 주로 쓴다!
-
Q. svg 파일을 읽고 싶다.
-
import ... from './hello/world/something.svg'
-
svg → 경로로 읽고싶다!
ex) url-loader
-
svg → string으로 읽고싶다!
ex) raw-loader
-
svg → React 컴포넌트로 읽고싶다.
ex) @svgr/webpack
-
-
결론적으로, 내가 뭔가 특이한걸 import 하고 싶다!
-
엑셀을 읽고싶다.
ex) xlsx-loader
-
-
CRA로 할때 (eject 안하고 사용하는 경우)
-
react-app-rewired
+customize-cra
$ yarn add customize-cra --dev $ yarn add react-app-rewired --dev
package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 react-app-rewired를 통해 실행
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", },
프로젝트 가장 최상단 위치에서 config-overrides.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다.
config-overrides.js 를 작성하기 전에, decorator 문법을 사용하기 위해 필요한 패키지를 설치
$ yarn add --dev @babel/plugin-proposal-decorators
아래와 같이
const { addDecoratorsLegacy, disableEsLint, override } = require("customize-cra"); module.exports = { webpack: override( disableEsLint(), addDecoratorsLegacy() ) };
customize-cra가 지원해주는 addDecoratorsLegacy 를 통해 decorator문법을 사용할 수 있게 되었다.
mobx-react의 observer decorator를 App.js에 적용해 볼 것이다.
customize-cra 문서에서 disableEsLint 플러그인을 같이 사용하라고 나타나있기 때문에 설정파일에 명시하였다.
-
craco
-
Author And Source
이 문제에 관하여(Babel & TypeScript & Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ggombee/Babel-TypeScript-Webpack저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)