[rollup.js] 환경 설정하기(2) - 플러그인 정리하기

[rollup.js] 환경 설정하기(2) - 플러그인 정리하기

이 글은 이전에 삽질했던 기록을 바탕으로 많이 진행된 상태에서 작성하는 글이다.삽질 기록 ⬇더보기2024.05.13 - [개발/Bundle] - [rollup.js] 환경 설정하기 - 오류(1) [rollup.js] 환경 설정하기(1) - 오류 해결하기이 글에 대한 배경은2024.04.25 - [개발] - [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔? [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?분석을 하게 된chairking-95.tistory.com개요ES5,ES6,제이쿼리로 만들어진 프로젝트를 리액트 환경에서 실행될 수 있도록 지원하는 프로젝트를 사내에서 진행하고 있는데 UMD 예제를 지원할 수 있어야 했다. UMD가 뭐..

  • format_list_bulleted 개발/Bundle
  • · 2024. 6. 12.
  • textsms
Webpack , Babel ?

Webpack , Babel ?

Webpack?웹팩(Webpack 또는 webpack)은 오픈 자바 스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프런트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다. 웹팩은 의존성을 취한 다음 의존성 그래프를 만듦으로써 웹 개발자들이 웹 애플리케이션 개발 목적을 위해 모듈 방식의 접근을 사용할 수 있게 도와준다. 명령 줄을 통해서 사용할 수 있으며, "webpack.config.js"이라는 이름의 구성 파일을 사용하여 구성할 수 있다. 이 파일을 사용하면 프로젝트를 위해 로더, 플러그인 등을 정의할 수 있다. (웹팩은 로더를 통..

  • format_list_bulleted 개발/Bundle
  • · 2024. 6. 12.
  • textsms
[rollup.js] 환경 설정하기(1) - 오류 해결하기

[rollup.js] 환경 설정하기(1) - 오류 해결하기

이 글에 대한 배경은2024.04.25 - [개발] - [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔? [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?분석을 하게 된 배경⬇더보기사내에서 자바스크립트(바닐라,jquery)로 만든 신규 제품을 리액트에 지원이 될 수 있도록 개선하는 과정에서기존의 제품을 script 태그 한줄로 외부 페이지에 import 시chairking-95.tistory.com에서 시작된다. 사내 프로젝트는 commomJS 환경에서 개발된 상태에서 React를 래핑하여 지원할 수 있도록 개선해야 하는데타사 제품에는 umd 예제를 지원하고 있어서 rollup.js를 적용해 해당 예제를 지원할 수 있도록 해야한다. ..

  • format_list_bulleted 개발/Bundle
  • · 2024. 5. 13.
  • textsms
[Babel] Loader 사용하기 😎

[Babel] Loader 사용하기 😎

이전 글에서는 webpack을 이용한 기본 설정을 마쳤다.더보기2024.05.02 - [Javascript/Webpack] - Webpack 이해하기 - Concepts이번 글에는 기본 환경을 적용한 webpack에 babel을 적용하여 webpack에대한 전반적인 이해도를 추가로 진행하도록하고자 합니다. 로더는 webpack 에서 중요한 부분을 차지하기 때문에 단순하게 번들링만 할 경우, 효용성이 크게 떨어진다고 합니다.번들링을 사용하지 않고 각각의 정적파일로 관리할 때, 장점들을 모두 사용하기 위해 Loader 라는 것을 이용합니다. Loader는 모듈을 입력받아 원하는 형태로 변환하고 새로운 모듈을 출력하는데Loader는 babel 같은 트랜스 파일러 뿐 아니라 이미지파일, CSS파일 등에 대한 작..

  • format_list_bulleted 개발/Bundle
  • · 2024. 5. 9.
  • textsms
[Webpack] Webpack 이해하기 - Concepts

[Webpack] Webpack 이해하기 - Concepts

아래 문서는 webpack의 가이드 문서를 참고하여 작성됨을 알려드립니다. Webpack ?webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.( Webpack 공식 사이트 )디펜던시 그래프란?더보기하나의 파일이 다른 파일에 의존할 때 마다, webpack은 이것을 의존성으로 취급합니다. 이를 통해 webpack은 이미지 또는 웹 폰트와 같은 코드가 아닌 애셋을 가져와, 애플리케이션에 의존성으로 제공할 수 있습니다. webpack은 애플리케이션에서 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한 다음, 모..

  • format_list_bulleted 개발/Bundle
  • · 2024. 5. 2.
  • textsms
<