Authoring Libraries | Webpack

애플리케이션 외에도 JavaScript 라이브러리를 번들링 할 때도 webpack을 사용할 수 있습니다. 아래의 가이드는 번들링 전략을 간소화하려는 라이브러리 작성자를 위한 것입니다.
사용자가 1부터 5까지의 숫자를 숫자 표현에서 텍스트로 또는 그 반대로 변환할 수 있는 작은 라이브러리 webpack-numbers를 작성한다고 가정해 보겠습니다. 예. 2 에서 'two'.
프로젝트의 기본 구조는 다음과 같을 것입니다.
npm으로 프로젝트를 초기화한 다음, webpack, webpack-cli, lodash를 개발 의존성으로 설치합니다.
처음에는 lodash를 라이브러리에 함께 번들할 것이므로 devDependency로 설치합니다. 최종 출력물에 포함되기 때문에 라이브러리 사용자는 이를 별도로 설치할 필요가 없습니다.
아래의 기본적인 webpack 설정으로 시작해봅시다.
webpack으로 애플리케이션을 번들해보았다면 익숙할 것입니다. 기본적으로 webpack에게 src/index.js를 dist/webpack-numbers.js로 번들하도록 지시합니다.
라이브러리를 번들링할 때는 source map을 생성하는 것이 좋습니다. Source map을 사용하면 라이브러리 사용자가 최소화된 번들 대신 원본 소스 코드를 디버깅할 수 있습니다. devtool 옵션으로 설정할 수 있습니다.
devtool 값으로 'source-map'을 사용하면 번들과 함께 별도의 .map 파일이 생성됩니다. 사용자가 디버깅에 활용할 수 있도록 이 .map 파일도 함께 배포하세요.
지금까지는 애플리케이션 번들링과 동일하며 다른 점은 output.library 옵션을 통해 엔트리 포인트를 export 해야 합니다.
사용자가 script 태그를 통해 사용할 수 있도록 엔트리 포인트를 webpackNumbers로 export 했습니다.
그러나, script 태그를 통해 참조될 때만 작동하며 CommonJS, AMD, Node.js 등과 같은 다른 환경에서는 사용할 수 없습니다.
라이브러리 작성자는 다양한 환경에서 호환되기를 원합니다. 즉, 사용자가 아래 나열된 여러 방법으로 번들 된 라이브러리를 사용할 수 있어야 합니다.
CommonJS module require:
type을 'umd'로 설정하여 output.library 옵션을 업데이트해 보겠습니다.
webpack은 라이브러리를 CommonJS, AMD, script 태그에서 사용할 수 있도록 번들할 것입니다.
library 설정은 entry 설정과 연관되어 있습니다. 대부분의 라이브러리의 경우 단일 엔트리 포인트를 지정하는 것으로 충분합니다. 다중 진입 라이브러리도 가능하지만, index script를 통해 부분적으로 export하는 것이 더 간단합니다. 라이브러리의 entry로 array를 사용하는 것은 권장되지 않습니다.
이제 npx webpack을 실행하면 다소 큰 번들이 생성되는 것을 볼 수 있습니다. 파일을 살펴보면 lodash가 코드와 함께 번들되어 있습니다. lodash를 번들에 포함해 라이브러리가 비대해지는 것을 막기 위해 webpack이 이를 외부 모듈로 취급하도록 설정할 수 있습니다. 더 이상 번들하지 않으므로 사용자가 이를 직접 제공해야 합니다. 따라서 라이브러리 사용자의 패키지 매니저가 자동으로 설치할 수 있도록 lodash를 devDependencies에서 dependencies 또는 peerDependencies로 옮겨야 합니다.
externals 설정을 사용하면 됩니다.
이는 라이브러리가 사용자 환경에서 lodash라는 종속성을 사용할 수 있다고 예상한다는 것을 의미합니다.
종속성에서 여러 파일을 사용하는 라이브러리의 경우:
externals에서 library를 지정하여 번들에서 제외할 수 없습니다. 하나씩 또는 정규식을 사용하여 제외해야 합니다.
프로덕션 가이드에 언급된 단계에 따라 프로덕션에 맞게 출력을 최적화하세요. 또한 생성된 번들의 경로를 package.json의 main 필드에 추가하세요.
또는 이 가이드에 따라 표준 모듈로 추가하세요.
키 main은 package.json의 표준을, module은 JavaScript 생태계 업그레이드가 하위 호환성을 깨지 않고 ES2015 모듈을 사용할 수 있도록 하는 제안[1] [2]을 의미합니다.
module 속성은 ES2015 모듈 구문을 사용하는 스크립트를 가리켜야 하지만 아직 브라우저나 노드에서 지원하지 않는 다른 구문 기능은 없습니다. 이를 통해 webpack은 사용자가 라이브러리의 특정 부분만 소비하는 경우 모듈 구문 자체를 파싱하여 트리 쉐이킹을 통해 보다 가벼운 번들을 제공할 수 있습니다.
이제 사용자에게 배포하기 위해 npm 패키지로 게시하고 unpkg.com에서 찾을 수 있습니다.
라이브러리와 관련된 스타일시트를 노출하려면 엔트리에서 CSS를 가져오고 webpack의 내장 CSS 지원이 이를 추출하도록 하세요. 내보낸 .css 파일의 이름은 output.cssFilename에 따라 정해지며, 사용자는 다른 스타일시트와 같은 방식으로 이를 사용하고 로드할 수 있습니다.
저작권은 OpenJS Foundation 및 webpack 기여자에게 있으며, 모든 권리는 보호됩니다. OpenJS Foundation은 등록 상표를 보유하고 있으며 상표를 사용합니다. OpenJS Foundation의 상표 목록은 Trademark Policy와 Trademark List에서 확인할 수 있습니다. OpenJS Foundation 상표 목록에 표시되지 않은 상표 및 로고는 각 소유자의 상표™ 또는 등록 상표®입니다. 이를 사용한다고 해서 해당 소유자와의 제휴 관계나 보증을 의미하지는 않습니다.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy