Vue 웹 컴포넌트를 사용한 웹 팩 외부 라이브러리 액세스

Vue 웹 컴포넌트를 사용한 웹 팩 외부 라이브러리 액세스

vue-cli.3을 사용하여 웹 컴포넌트를 생성하여 다음 명령을 사용하여 다른 프로젝트에서 사용합니다.

vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue

구성 요소는 lodash에 종속되어 있습니다.lodash는 호스트 애플리케이션에서 제공되기 때문에 lodash를 컴포넌트에 번들하고 싶지 않습니다.따라서 다음과 같이 vue.config.js에서 웹 팩을 설정합니다.

module.exports = {
    configureWebpack: {
        externals: {
            lodash: 'lodash',
            root: '_'
        }
    }
}

이렇게 하면 lodash 없이 컴파일을 성공적으로 수행할 수 있습니다.

호스트 애플리케이션(컴포넌트를 사용하는 애플리케이션)에서 새로 생성 및 컴파일된 컴포넌트의 소스 경로를 index.html에 추가합니다.

<script src="http://localhost:8080/helloworld.umd.js"></script>

App에 컴포넌트를 등록합니다.vue:

<template>
    <div id="app">
        <demo msg="hello from my component"></demo>
    </div>
</template>

<script>
export default {
    name: "app",
    components: {
        demo: helloworld
    }
};
</script>

헬로월드 컴포넌트는 문제없이 렌더링된다.컴포넌트의 모든 기능은 문제없이 동작하지만 Lodash 메서드를 호출하면 바로 알 수 있습니다.

Uncaught TypeError: Cannot read property 'camelCase' of undefined

즉, 컴포넌트는 호스트 애플리케이션이 사용하는 lodash 라이브러리에 액세스할 수 없습니다.

호스트 애플리케이션의 이미 번들된 라이브러리를 컴포넌트에서 사용하는 방법을 찾아야 합니다.

방법이 있을까요?

사용하신 Vue 설정이 동작하기 때문에(GitHub 데모 참조), 셋업에 뭔가 부족한 것이 있을 수 있습니다.데모를 시작하기 위한 관련 단계를 나열했습니다.

1. 인public/index.htmlCDN에서 Lodash를 Import할 때 다음을 사용하여 Lodash를 Import합니다.

   <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
   

2. 라이브러리 컴포넌트(src/components/HelloWorld.vue),_global은 Import하지 않고 사용할 수 있습니다.예를 들어 다음과 같은 형식의 계산된 속성을 표시합니다.msg로 받치다._.camelCase.

3. 보풀 오류를 방지하려면_ESLint 글로벌(/* global _ */).

4. 그럼 외부화하도록 웹 팩을 설정합니다.lodash:

   module.exports = {
     configureWebpack: {
       externals: {
         lodash: {
           commonjs: 'lodash',
           amd: 'lodash',
           root: '_' // indicates global variable
         }
       }
     }
   }
   

5. 인package.json, 를 편집합니다.build스크립트 대상:

   "build": "vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue",
   

6. 달려.npm run build를 편집하고,dist/demo.html를 포함하다<script>위에 태그를 붙입니다.

7. 에서 HTTP 서버를 기동합니다.dist(예:python -m SimpleHTTPServer를 열어 주세요.dist/demo.html...의 효과를 관찰합니다._.camelCase(스텝 2부터).

GitHub 데모

언급URL : https://stackoverflow.com/questions/53664163/webpack-external-library-access-with-vue-web-components