Как добавить в проект Vue.js внешнюю js библиотеку, которая не доступна в пакетном менеджере npm?

Как подключить библиотеку SmoothScroll к проекту на Vue.js с использованием CLI, если она доступна только в виде отдельного файла (CDN) и отсутствует в NPM? Каковы способы сделать эту библиотеку модулем NPM для удобной работы с ней? Необходимо, чтобы функции из этой библиотеки были доступны для использования.
  • 17 января 2024 г. 3:58
Ответы на вопрос 2
Есть несколько способов добавить внешнюю JavaScript-библиотеку в проект Vue.js, которая не доступна через npm:

1. Подключение через тег `<script>` в `index.html` или в `public/index.html` в случае Vue CLI:

   Вы можете добавить ссылку на CDN библиотеки SmoothScroll напрямую в HTML-файл:

   ```html
   <!-- public/index.html -->
   <script src="https://example.com/path-to-smoothscroll.js"></script>
   ```

   После этого библиотека будет загружена браузером, и вы сможете использовать её глобальные переменные в вашем Vue-компоненте. Например:

   ```js
   // В вашем Vue-компоненте
   export default {
     mounted() {
       SmoothScroll(/* options */);
     },
   };
   ```

2. Локальное подключение файла:

   Если есть возможность скачать файл библиотеки, его можно поместить в папку `public` или в любую другую папку внутри вашего проекта и импортировать его напрямую в вашем JavaScript-коде:

   Сначала скопируйте файл `smoothscroll.js` в папку, например, `src/assets`.

   Затем вы можете использовать тег `<script>` как в пункте 1, только путь будет локальным, или напрямую импортировать файл в вашем компоненте Vue:

   ```js
   // Предполагаем, что файл находится в 'src/assets/smoothscroll.js'
   import SmoothScroll from '@/assets/smoothscroll';

   export default {
     mounted() {
       SmoothScroll(/* options */);
     },
   };
   ```

   Этот способ требует, чтобы файл `smoothscroll.js` был модульным и экспортировал функцию или объект `SmoothScroll`, что может потребовать модификации самого файла.

3. Создание модуля NPM:

   Вы можете создать свой собственный модуль NPM на основе библиотеки SmoothScroll для локального использования или публикации на npm.

   - Создайте новую папку, например `smoothscroll-package`.
   - В этой папке инициализируйте новый npm проект с помощью команды `npm init`.
   - Поместите файл `smoothscroll.js` в эту папку.
   - Создайте файл `index.js` (или `index.ts`, если используете TypeScript), который будет экспортировать функционал библиотеки.
   - Укажите в файле `package.json` точку входа в ваш пакет (например, `"main": "index.js"`).
   - Реализуйте экспорт функциональности `SmoothScroll`.
   - Затем подключите этот локальный пакет в ваш проект Vue.js, используя `npm link` или путём указания пути к папке в `package.json` (`"smoothscroll-package": "file:../smoothscroll-package"`).

Используя один из вышеприведенных способов, вы сможете подключить библиотеку SmoothScroll к вашему проекту Vue.js.
Клонируешь репо, билдишь, публикуешь/устанавливаешь локально: 

https://docs.npmjs.com/creating-and-publishing-sco...

Есть ньюанс, если либа не поддерживает es6, проблемки будут.
Похожие вопросы