웹팩에서 외부 모듈을 사용하는 방법

이 글에서는 webpack 외부 모듈의 구체적인 사용법을 주로 소개하고 참고하겠습니다.

이 기사에서는 Webpack이 라이브러리를 패키징할 때 자주 사용되는 외부 옵션에 대해 설명합니다. 이는 매우 일반적인 모듈을 게시된 라이브러리에 패키징하는 것을 방지하고 대신 라이브러리가 상위에서 사용된 후 외부 모듈로 선언하도록 선택하는 데 사용됩니다. 계층인 Webpack은 최종 단계에서 외부 종속성 모듈을 패키징합니다.

외부 옵션은 일반적으로 라이브러리 패키징에 사용됩니다. 라이브러리가 아니라 최종 앱 릴리스 JS 파일인 경우 외부는 의미가 없습니다. Webpack 패키징 라이브러리 분석과 일부 옵션의 역할에 대해서는 이전 글에서 다루었습니다.

외부 옵션

우리는 여전히 이전 기사의 예를 사용하여 util.js 라이브러리를 정의합니다.

import $ from 'jquery'

function hideImages() {
 $('img').hide();
}

export default {
 "hideImages": hideImages
}

Webpack을 사용하여 이 라이브러리를 패키징하고 게시합니다.

// 入口文件
entry: {
 util: './util.js',
}

// 输出文件
output: {
 path: './dist',
 filename: '[name].dist.js'

 library: 'util',
 libraryTarget: commonjs2,
 targetExport: 'default'
}

에 패키징된 util.dist.js 파일 이렇게 하면 소스 코드에서 jquery 코드를 사용하므로 jquery 코드가 완전히 삽입됩니다. 그러나 jquery는 매우 일반적인 모듈이기 때문에 종종 우리가 원하는 것이 아닙니다. 앱에서 다른 라이브러리도 이를 사용할 수 있습니다. 최종 앱 릴리스 코드에는 jquery의 복사본이 많이 있을 것입니다. 물론 이는 정상적인 기능에 영향을 미치지 않을 수도 있습니다. 그러나 큰 코드 크기를 차지합니다.

그래서 일반적으로 라이브러리가 jquery 및 부트스트랩과 같은 일반적인 JS 모듈에 의존해야 하는 경우 이를 번들로 패키징할 수 없지만 Webpack 구성에서 external을 선언합니다.

externals: {
 jquery: {
  root: 'jquery',
  commonjs: 'jquery',
  commonjs2: 'jquery',
  amd: 'jquery',
 },
},

이는 Webpack에 다음과 같은 내용을 삽입하지 마세요. 모듈을 컴파일된 JS 파일에 추가하세요. 내 소스 코드에 나타나는 import/require 문을 보관하세요.

컴파일된 번들 파일의 구조를 살펴보면

module.exports = (function(modules) {
 var installedModules = {};
 function webpack_require(moduleId) {
   // ...
 }
 return webpack_require('./util.js');
}) ({
 './util.js': generated_util,
 // '/path/to/jquery.js': generated_jquery 原本有这一行，现在被删去。
});

jquery 모듈이 번들 파일에 패키징되어 있지 않은 것을 확인할 수 있으며, util의 경우 생성된 코드, 즉 import와 관련된 문이 포함되어 있음을 알 수 있습니다. 생성된_util 함수의 jquery도 그대로 유지됩니다. 원래 의미:

function generated_util(module, exports, webpack_require) {
 var $ = require('jquery');
 // util的其它源代码
 // ...
}

물론 완전히 수정되지 않은 것은 아닙니다. 예를 들어 여기서는 CommonJS 스타일 패키징 방법을 사용하기 때문에 가져오기가 전통적인 require 키워드로 다시 변경됩니다. 그러나 이것들은 사소한 것입니다. 핵심은 require 키워드를 유지하고 실제로 jquery를 도입하기 위해 webpack_require를 사용하지 않는다는 것입니다. 이는 이 JS 파일의 현재 모듈 관리 시스템에는 jquery가 없다는 것을 의미합니다. jquery는 실제로 이 JS 파일을 다른 사람이 참조하고 상위 수준에서 컴파일할 때만 도입될 수 있습니다. 여기서 require 키워드는 webpack_require로 대체됩니다.

외부 종속성 모듈의 경우 일반적으로 이렇게 할 수 있습니다. 예를 들어 npm을 사용하여 라이브러리를 게시하는 경우 package.json 파일의 종속성에 jquery를 추가하면 다른 npm이 게시한 라이브러리를 설치할 때 jquery가 됩니다. 또한 다른 사람들이 패키징하고 사용할 수 있도록 node_modules에 자동으로 다운로드됩니다.

umd 형식으로 패키징

umd 형식 패키징을 사용하면 외부 모듈이 다양한 환경에서 어떻게 작동하는지 확인할 수 있습니다.

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

그리고 generate_util은 해당 매개변수 __webpack_external_module_jquery__도 추가합니다.

function generated_util(module, exports, webpack_require,
            __webpack_external_module_jquery__) {
 var $ = __webpack_external_module_jquery__;
 // util的其它源代码
 // ...
}

이런 작성 방식은 위의 CommonJS 컴파일 버전과 구조는 다르지만 사실 본질은 동일합니다. 이제 umd는 다양한 운영 환경을 처리해야 하므로 require('jquery')를 발전시켜 이를 팩토리의 매개변수로 전달합니다. 각 운영 환경마다 고유한 접근 방식이 있습니다.

1. CommonJS: require('jquery') 문을 유지합니다.

2. AMD: 정의에서 jquery를 종속 모듈로 정의합니다.

3. Var: 전역 도메인에서 jquery 변수를 가져옵니다. 이를 위해서는 모듈 전에 jquery를 로드해야 합니다.

그러면 상황이 어떠하든 로드된 jquery 모듈을 팩토리 함수에 매개변수로 전달하여 util 모듈이 올바르게 로드될 수 있습니다.

위의 Webpack 생성 코드 부분은 다소 복잡할 수 있으며, Webpack 패키징 모듈의 메커니즘과 원리를 더 잘 이해해야 합니다. 이 부분에 대해서는 이 기사에서 자세히 설명했습니다.

Summary

위는 Webpack의 외부 옵션 사용에 대한 내용으로, 컴파일된 JS 코드를 통해 어떻게 동작하는지 분석한 것입니다. Webpack과 관련하여 생성된 코드를 읽는 것은 여전히 ​​매우 중요하다고 생각합니다. 이를 통해 외부 메커니즘을 진정으로 이해하고 몇 가지 함정에 직면했을 때 디버깅하는 방법을 알 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

datepicker를 기반으로 자신만의 각도 시간 구성 요소를 정의하는 예

Vue.js 2.0이 때때로 img src 속성을 두 방향으로 바인딩하지 못하는 문제에 대한 솔루션

Vue img src 할당 방법에 대한 동적인 .js

위 내용은 웹팩에서 외부 모듈을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!