Как собирать umd c помощью Vite?

от
prokoding.ru > Laravel > Как собирать umd c помощью Vite?

Сборка UMD (Universal Module Definition) с использованием инструмента Vite в Laravel довольно проста. Vite – это современный инструмент для разработки фронтенд-приложений, который предлагает быструю сборку на основе ESM (ECMAScript Modules), что позволяет избежать проблем, связанных с обычными сборками на основе CommonJS или AMD. Для сборки UMD с помощью Vite, нужно выполнить следующие шаги:

1. Установите Vite в свой проект Laravel, выполнив команду:

npm install vite --save-dev

2. Создайте файл vite.config.js в корневой директории проекта и настройте его следующим образом:

// vite.config.js
module.exports = {
  build: {
    lib: {
      entry: 'src/main.js',
      name: 'MyLibrary',
      formats: ['umd']
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
}

В этом файле мы указываем, что хотим собрать наш проект в виде UMD-библиотеки. Аргумент entry указывает на главный файл нашего проекта, который будет использоваться при сборке. Аргумент name задает имя переменной, под которым наша библиотека будет доступна в глобальной области видимости. Аргумент formats определяет, в каком формате мы хотим собрать библиотеку, в данном случае UMD.

3. Обновите секцию scripts в package.json, чтобы добавить скрипты для сборки и запуска Vite:

{
  "scripts": {
    "build": "vite build",
    "serve": "vite preview"
  }
}

4. Создайте нужный файл src/main.js, который будет являться главным файлом вашей библиотеки. Здесь вы можете импортировать и экспортировать необходимые модули и компоненты, определить глобальные переменные и т.д.

// src/main.js
import MyComponent from './MyComponent.vue'

// экспорт компонента или модуля
export {
  MyComponent
}

// экспорт глобальной переменной
window.MyLibrary = {
  version: '1.0.0'
}

5. Запустите сборку командой:

npm run build

Эта команда запустит процесс сборки Vite и сгенерирует файл UMD-библиотеки в директории dist. В этом файле будут все необходимые зависимости и компоненты, которые вы экспортировали в src/main.js.

Теперь вы можете использовать вашу UMD-библиотеку в проектах, не зависящих от фреймворка. Просто подключите сгенерированный файл UMD в своем HTML-файле и начните использовать экспортированные модули и глобальные переменные:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <div id="app"></div>

  <script src="path/to/your/umd/library.js"></script>
  <script>
    console.log(MyLibrary.version); // 1.0.0

    new MyLibrary.MyComponent().$mount('#app');
  </script>
</body>
</html>

Таким образом, с использованием инструмента Vite вы можете легко собирать и использовать UMD-библиотеки в ваших Laravel проектах.