require.context 사용법 소개(예제 포함)

이 글은 require.context 사용법을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

원인: 갑자기 webpack의 관리 기능이 사용되는 이유는 무엇입니까?

프로젝트의 특정 페이지에는 N개의 데모 사진을 소개해야 합니다. 즉, 리소스 일괄 도입입니다. 10개 이상의 그림 리소스를 도입하려면 다음 도입 코드를 10개 이상 작성해야 합니다. import XXX from 'relative/path/assets/imgs/xxx'; more 정적 리소스를 도입해야 합니까? 이것은 require.context가 유용한 곳입니다.

Documents

공식 문서의 소개가 먼저 나와 있는데, 한 번 보시면 사용 자세를 이해하실 수 있습니다.

여기 밤이 있습니다

더 이상 고민하지 말고 위 시나리오의 코드를 살펴보겠습니다.

이 시나리오에서는 지정된 폴더 아래의 모든 webp 형식 사진을 가져오고, 데모1을 클릭하면 데모1 아래에 x 케이스 사진을 표시하고, 데모X를 클릭하면 데모X 아래에 x 케이스 사진을 표시해야 합니다.

    // 通过require.context的方式引入指定的路径下匹配到的模块引用
    const demoImgsContext = require.context('@src/assets/imgs/demo', false, /\.webp$/);
    ...
    // 使用姿势
    trigger(type) {
        this.demoImgs = Arry.from({length: config.type}, (key, value) => value + 1)
            .map(index => demoImgsContext(`./${type}_demo${index}.webp`));
    }

한 예에서 추론을 이끌어내는 장면이 여전히 필요한가요?
예를 들어 vuex는 여러 모듈 스토어를 소개합니다. 이 방법을 사용할 수도 있습니다.

    // 添加module文件是，文件命请按照module_XXX的方式命名
    // 自动引入module文件夹下的js文件
    const mutationContext = require.context('./module', false, /.*\.js/);
    const modules = mutationContext.keys().reduce((prev, cur) => {
        // 排除module_root文件
        const matches = cur.match(/module_(?!.*root)(\w+)\.js/);
        const key = matches && matches[1];
        key && (prev[key] = mutationContext(cur).default);
        return prev;
    }, {});

다음으로 require.context가 리소스를 동적으로 도입하는 방법을 살펴보겠습니다.

정적 이미지 케이스의 청크 부분에 대한 코드가 어떻게 생겼는지 보려면 패키지된 dist 디렉토리를 살펴보세요.

트리거 메소드에서 모듈 리소스를 참조하는 코드는 다음과 같습니다. y 메소드가 호출되고 리소스의 경로가 전달됩니다.

    map(function (e) {
        return y("./".concat(t, "_demo").concat(e, ".webp"))
    })

y 방법이 무엇인가요? 단서를 따라 패키지된 코드를 계속 살펴보세요.

   y = a("ae36");

y 방법은 특정 모듈을 내보내는 것입니다. 이 ID에서 모듈 코드를 계속 확인하세요:

ae36: function (t, e, a) {
      // 此处是一个map映射，key值和真正的资源id的映射
      var i = {
        "./a_module_demo1.webp": "6085",
        "./a_module_demo2.webp": "fd3b",
        "./b_module_demo1.webp": "cbf6",
        "./b_module_demo2.webp": "220e",
        "./c_module_demo1.webp": "273e",
        "./c_module_demo2.webp": "5a5e",
        "./d_module_demo1.webp": "75b0",
        "./d_module_demo2.webp": "2d3e"
      };
      // 此处根据module的id值，真正require一个资源
      function r(t) {
        var e = o(t);
        return a(e)
      }
      
      function o(t) {
        var e = i[t];
        if (!(e + 1)) {
          var a = new Error("Cannot find module '" + t + "'");
          throw a.code = "MODULE_NOT_FOUND", a
        }
        return e
      }
      r.keys = function () {
        return Object.keys(i)
      }, r.resolve = o, t.exports = r, r.id = "ae36"
    },

"6085", "fd3b" 및 기타 맵 매핑 값 값은 실제 리소스입니다. 해당 모듈 매핑은 다음과 같습니다.

6085: function (t, e) {
      t.exports =
        "//${你配置的项目publicPath}/img/1_module_demo1.ed6db768.webp"
    },

사용자가 트리거 메서드를 트리거하면 유형 및 인덱스로 지정된 값에 따라 require.context에 저장된 모듈 리소스 참조를 기반으로 실제 리소스 모듈을 찾습니다. 키 값에 따라 요구 사항을 수행하면 브라우저는 해당 리소스를 다운로드하고 일괄적으로 도입한 후 요청 시 로드하는 아이디어를 달성하는 데 도움이 됩니다.

이 기사는 여기서 끝났습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요!

위 내용은 require.context 사용법 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!