Webpack 모듈을 사용하여 Library를 패키징하는 원리 및 구현-JS 튜토리얼-php.cn

이 글은 주로 webpack 구성 모듈 패키징 라이브러리의 원리와 구현을 소개하고 있습니다.

이전 기사에서는 Webpack 패키징 JS 모듈의 기본 원리를 분석했습니다. 소개된 사례는 가장 일반적인 상황입니다. 즉, 여러 개의 JS 모듈과 하나의 입력 모듈이 하나의 번들 파일로 패키징되어 브라우저에서 직접 사용할 수 있거나 다른 JavaScript 엔진에 의한 실행은 완전한 실행 파일을 생성하기 위한 직접 컴파일과 동일합니다. 그러나 또 다른 매우 일반적인 상황이 있습니다. 즉, JavaScript 라이브러리를 구축하고 게시하려는 경우입니다. 예를 들어 npm 커뮤니티에 자신의 라이브러리를 게시하는 경우 Webpack에는 해당 구성이 필요하며 컴파일된 코드는 약간 다릅니다. .

이전 글과 마찬가지로 이번 글에서는 주로 Webpack에서 생성된 코드를 분석하고, 이를 결합하여 라이브러리 컴파일 시 Webpack의 라이브러리 구성 옵션의 구체적인 역할을 설명합니다. 해당 공식 문서는 여기에 있습니다.

JS 작성을 위한 라이브러리

간단한 라이브러리를 작성해 보겠습니다. util.js:

import $ from &#39;jquery&#39;

function sayHello() {
 console.log("Hello");
}

function hideImages() {
 $(&#39;img&#39;).hide();
}

export default {
 sayHello: sayHello,
 hideImages: hideImages
}

로그인 후 복사

두 가지 기능을 제공합니다. 물론 서로 관련이 없습니다. 실제로는 아무 쓸모가 없으며 순전히 교육 참고용으로만 사용됩니다. . .

다음으로 Webpack 구성을 작성합니다.

// 入口文件
entry: {
 util: &#39;./util.js&#39;,
}

// 输出文件
output: {
 path: &#39;./dist&#39;,
 filename: &#39;[name].dist.js&#39;
}

로그인 후 복사

하지만 이것만으로는 부족하고, 출력 파일은 즉시 실행되는 함수이고, 최종적으로 util.js의 내보내기가 반환됩니다. 이전 기사에서 분석한 바에 따르면 최종 생성된 번들 코드 구조는 대략 다음과 같습니다.

(function(modules) {
 var installedModules = {};
 
 function webpack_require(moduleId) {
   // ...
 }

 return webpack_require(&#39;./util.js&#39;);
}) ({
 &#39;./util.js&#39;: generated_util,
 &#39;/path/to/jquery.js&#39;: generated_jquery
});

로그인 후 복사

실행하면 util.js의 내보내기 부분만 반환되며 필요한 것은 다음과 같습니다. 이 반환 값을 컴파일된 파일의 module.export에 제공하여 컴파일된 파일이 다른 사람이 가져올 수 있는 라이브러리가 되도록 합니다. 따라서 우리가 얻고자 하는 컴파일된 파일은 다음과 같아야 합니다.

module.exports = (function(modules) {
 var installedModules = {};
 function webpack_require(moduleId) {
   // ...
 }
 return webpack_require(&#39;./util.js&#39;);
}) ({
 &#39;./util.js&#39;: generated_util,
 &#39;/path/to/jquery.js&#39;: generated_jquery
});

로그인 후 복사

이러한 결과를 얻으려면 Webpack 구성의 출력 부분에 라이브러리 정보를 추가해야 합니다.

// 入口文件
output: {
 path: &#39;./dist&#39;,
 filename: &#39;[name].dist.js&#39;,

 library: &#39;util&#39;,
 libraryTarget: commonjs2
}

로그인 후 복사

The 여기서 가장 중요한 것은 libraryTarget입니다. 이제 commonjs2 형식을 사용하면 위의 컴파일 결과를 얻을 수 있습니다. 이는 Webpack 라이브러리가 최종 출력을 CommonJS 형식으로 내보내어 라이브러리 출시를 실현한다는 것을 의미합니다.

다른 게시 형식

libraryTarget에는 commonjs2 외에도 다른 옵션이 있습니다.

var (默认值，发布为全局变量)
commonjs
commonjs2
amd
umd

로그인 후 복사

다른 옵션을 사용하면 컴파일된 파일을 다른 JavaScript 실행 환경에서 사용할 수 있습니다. 여기에서 Tiger Balm umd 형식의 출력이 어떻게 보이는지 직접 볼 수 있습니다.

(function webpackUniversalModuleDefinition(root, factory) {
 if(typeof exports === &#39;object&#39; && typeof module === &#39;object&#39;) // commonjs2
  module.exports = factory();
 else if(typeof define === &#39;function&#39; && define.amd)
  define("util", [], factory); // amd
 else if(typeof exports === &#39;object&#39;)
  exports["util"] = factory(); // commonjs
 else
  root["util"] = factory(); // var
}) (window, function() {
 return (function(modules) {
  var installedModules = {};
  function webpack_require(moduleId) {
    // ...
  }
  return webpack_require(&#39;./util.js&#39;);
 }) ({
  &#39;./util.js&#39;: generated_util,
  &#39;/path/to/jquery.js&#39;: generated_jquery
 });
}

로그인 후 복사

는 다양한 경우를 처리해야 하기 때문에 이전 commonjs2 상황보다 훨씬 더 복잡하지만 실제로 다음 부분은 유사합니다. 가장 중요한 것은 umd 모듈을 작성하는 표준 방법인 처음 몇 줄입니다. 실제로 모듈을 로드하는 함수인 전달된 팩토리 함수를 실행한 다음, 다양한 운영 환경에 따라 반환된 결과를 해당 개체에 전달합니다. 예를 들어, var는 결과를 브라우저에서