bundle

bundle
[wake up!] dependencie, devDependencies, peerDependencies
package.json의 dependencies와 devDependencies의 차이점에 대한 정리 Peer Dependencies 에 대하여 dependencies 런타임과 빌드타임, 개발중 모두에서 이 종속성 패키지들이 필요하기 때문에, 앱이 빌드 될 때 이 종속성 패키지들이 번들에 포함되어 배포된다. devDependencies 런타임에서는 필요하지 않고 빌드타임 & 개발중에만 필요한 패키지들이다. 번들에는 포함되지 않는 종속성 패키지들이다. peerDependencies 해당 프로젝트를 운용하기 위해 항목에 포함된 의존성이 필요한 항목을 리스트하기 위해 있는 항목이다. 해당 패키지가 설치되지 않는 상태에서 어플리케이션이 실행된다면 우리의 프로젝트는 실행되지 않고 오류를 뱉는다. npm 버전 7부터..
→2022.07.23
bundle
[wake up!] bundler, babel-polyfill
bundler 번들러 비교를 통한 빌드 최적화 JS 빌드 과정 트랜스파일(Transpiling) 번들링(Bundling) 압축(Minifying) 번들러(bundler) webpack rollup parcel swc esbuild .... 초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC 바벨(Babel)로 ES6 최신 js 문법을 트렌스파일링 하고 코드 경량화를 위해 Terser같이 mangler로 단어를 축약하고, compressor로 js코드를 압축시킨다. 여기서 모든 과정들이 시간을 할당 받게된다. build 작업 시간을 줄이고 좋은 포퍼먼스를 찾는것이 중요한 과제가 된다. => 여기서는 요즘 핫한 SWC(Speedy Web Compiler)를 소개한다. Babel로 polyfill 적용 Yo..
→2022.07.22
bundle
[wake up!] cjs, esm
cjs, esm? Dan Fabulich의 Node Modules at War: Why CommonJS and ES Modules Can’t Get Along 번역글 왜 CommonJS와 ES Modules는 함께 쓸 수 없는가 Node 14에서는 현재 두 가지 종류의 스크립트가 있다. 하나는 옛날 방식인 CJS(CommonJS) 스크립트고 다른 하나는 import와 export를 사용하는 새로운 방식의 ESM(ECMAScript Modules) 스크립트이다. ESM 스크립트에서 import와 export는 언어의 일부이다. CJS와 마찬가지로 named exports와 default export에 대한 두 가지 구문이 있다. CommonJS에서 require()는 동기적으로 동작한다. require()..
→2022.07.22

• 이전
• 1
• 다음