집 > 기사 > 웹 프론트엔드 > webpack에서 동적으로 가져온 파일 구현

webpack에서 동적으로 가져온 파일 구현

亚连원래의: 2018-06-05 15:52:231814검색

이제 webpack에서 파일을 동적으로 가져오는 방법을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

처음 webpack을 사용하기 시작했을 때 많은 분들이 이런 생각을 하셨을 텐데요. 파일을 요구할 때, 정적인 문자열 경로를 작성하지 말고, 상황에 따라 변수를 정의하는 등 좀 더 유연한 방법을 사용해 보세요. 어떤 파일이 필요한지 결정하세요!

예를 들어 저자는 그러한 필요성에 직면했습니다.

당시 vue-router는 관리 시스템을 개발하는 데 사용되었습니다. 관리 시스템 자체에는 디렉터리 배열이 있었고, vue-router에도 경로 구성 배열이 필요했는데 둘은 정확히 연관되어 있었습니다. 그 당시 저는 디렉토리 배열을 유지한 다음 동적으로 경로 배열을 생성할 수 있을까?라고 생각했습니다.

그래서 다음과 같이 작은 데모를 구현했습니다.

// directory
let dir = [
 {
 name: &#39;a&#39;,
 path: &#39;/a&#39;,
 componentPath: &#39;./a.vue&#39;
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: r => require.ensure([], () => r(require(item.componentPath)), &#39;demo&#39;)
 });
}

위와 거의 동일합니다. 당시 소스 코드를 보관하지 않았기 때문에 아마도 일부 가능한 것을 무시하고 손으로 예제를 작성했을 것입니다. 문법 오류.

이 코드를 실행하면 오류가 나타나기 시작했습니다: Critical dependency.

몇 가지 정보를 확인한 후 webpack의 작동 메커니즘을 대략적으로 이해했으며 다음 사실도 이해했습니다. webpack 동적 요구 파일을 사용할 수 없습니다.

webpack은 패키징 도구이고 실행 시간은 사전 컴파일이라는 점을 알아야 합니다. 우리의 생각은 런타임에 어떤 파일이 필요할지 결정하는 것입니다. 왜냐하면 이런 방식으로 webpack은 할 수 없기 때문입니다. 어떤 패키지를 패키징해야 하는지 알지만 결과적으로 해당 파일은 패키징되지 않으므로 require는 확실히 필요하지 않습니다.

이 메커니즘을 이해하면 경로를 동적으로 등록하기 위해 경로를 직접 전달하는 것은 불가능한 해결책임을 판단해야 합니다.

그렇다면 파일을 동적으로 가져오려면 어떻게 해야 할까요? 나라를 구하기 위해 몇 가지 변화구 해결책을 고려해 볼 수 있습니다.

1. 사전 컴파일 단계에서 필수 경로를 결정합니다.

경로 문자열을 저장하기 위해 동적 변수를 사용하는 이유는 단순히 프로그램이 문자열 연결 등과 같은 일부 작업을 수행하기를 원하기 때문입니다. 대부분의 경우 이러한 프로그램은 사전 컴파일 중에 실행될 때와 런타임에 실행될 때 동일한 효과를 갖습니다. 예를 들어 위의 예에서는 두 개의 테이블을 수동으로 유지 관리하고 싶지 않습니다. 그런 다음 파싱 작업을 동적으로 수행하기 위해 패키징할 때 파일을 읽고 쓸 수 있으며, 파싱된 경로 배열을 지정된 파일에 쓸 수 있습니다. 이거 목표 달성한 거 아냐?

2. 구성 요소 개체를 직접 전달하는 것은 어떻습니까? 예를 들어 다음 구현 방법은 다음과 같습니다.

// directory
let dir = [
 {
 name: &#39;a&#39;,
 path: &#39;/a&#39;,
 component: r => require.ensure([], () => r(require(&#39;./a.vue&#39;)), &#39;demo&#39;)
 
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: item.component
 });
}

이 솔루션은 주로 우리의 예를 위한 것이지만 다른 상황에도 영감을 줄 수 있습니다.

그러나 결국 이것은 타협적인 해결책입니다. 한 가지를 이해해야 합니다. 즉, 사전 컴파일 단계에서 webpack은 어떤 파일을 가져올지 명확하게 알아야 합니다. 그렇지 않으면 해결책이 불가능합니다.

그런데, 인터넷에 require(path)라는 말도 있는데, require('./root/' + path)처럼 path가 순수 변수가 아닌 이상 이렇게 결합해도 되나요? 여기 require.ensure 함수에서 시도해 보았지만 작동하지 않았습니다. 어쩌면 내가 그것을 잘못된 방식으로 사용하고 있는 것일 수도 있습니다.

한 가지 더, 컴포넌트 객체 전달 시 파일 간 이동 시 문제가 있는 것 같습니다. 아무튼 디렉터리 배열, 경로 배열, 파싱 과정을 하나의 파일로 작성했습니다. 아마도 다른 파일을 구문 분석하기 위해 상대 경로를 사용하는 데 문제가 있을 수 있습니다. 이를 사용할 때는 주의가 필요합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

webpack에서 동적으로 가져온 파일 구현

관련 기사