Доступ к внешней библиотеке Webpack с помощью веб-компонентов Vue

Question

Я создаю веб-компонент с помощью vue-cli.3, чтобы использовать его в других проектах с помощью следующей команды:

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

Компонент зависит от lodash .Я не хочу связывать lodash с компонентом, потому что lodash будет предоставляться хост-приложением, поэтому я настраиваю webpack в 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>

Компонент helloworld визуализируется без проблем.Каждая функция компонента работает без проблем, но как только я вызываю метод lodash, я получаю;

Uncaught TypeError: Cannot read property 'camelCase' of undefined

, что означает, что компонент не может получить доступ к библиотеке lodash, которую использует хост-приложение.

Мне нужно найти способ использования уже связанных библиотек в хост-приложении из компонентов.

Есть ли способ?

Answer 1

Конфигурация Vue, которую вы использовали, должна работать (см. GitHub demo ), так что, возможно, в вашей настройке чего-то не хватает.Я перечислил соответствующие шаги для получения демонстрации:

1. В public/index.html проекта, сгенерированного VueCLI, импортируйте Lodash из CDN с помощью:

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

2. В компоненте библиотеки (src/components/HelloWorld.vue) можно использовать глобальный _ без импорта lodash.Например, отобразите вычисляемое свойство, которое форматирует msg prop с _.camelCase.

3. Чтобы избежать ошибок lint, укажите _ как ESLint global (/* global _ */).

4. В vue.config.js, настройте Webpack для вывода 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 demo