Uppy: Как использовать с модулем связки? - PullRequest
Новая
       15

Uppy: Как использовать с модулем связки?

0 голосов
/ 16 мая 2019

Uppy рекомендует использовать упаковщик поверх CDN, и я понимаю, почему - но я не слишком знаком с ними.

Сначала я попробовал Browserify, потому что он показался довольно простым, но я изо всех сил пытался require CSS-файлы.Дальнейшие исследования заставили меня почувствовать, что, возможно, Webpack будет лучше.

Но Webpack подавляет меня - я действительно могу использовать пример того, как использовать один из этих пакетов для компиляции Uppy, его плагинов и CSS, в мойmain.js.

Вот базовый пример из Uppy docs : 

// Import the plugins
const Uppy = require('@uppy/core')
const XHRUpload = require('@uppy/xhr-upload')
const Dashboard = require('@uppy/dashboard')

// And their styles (for UI plugins)
require('@uppy/core/dist/style.css')
require('@uppy/dashboard/dist/style.css')

const uppy = Uppy()
  .use(Dashboard, {
    trigger: '#select-files'
  })
  .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })

uppy.on('complete', (result) => {
  console.log('Upload complete! We’ve uploaded these files:', result.successful)
})

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

Browserify не поддерживает файлы CSS по умолчанию. Пример документа предполагает веб-пакет, возможно, его следует изменить! Есть несколько вариантов:

  • Имеется отдельная сборка для файлов CSS - это можно сделать с помощью PostCSS и плагина postcss-import . 
// app.css
@import '@uppy/core/dist/style.css';
@import '@uppy/dashboard/dist/style.css';

Затем вы можете добавить отдельный тег <style>, ссылающийся на связанный CSS-файл.

  • Используйте плагин CSS для просмотра, например sheetify . 
const css = require('sheetify')
css('@uppy/core/dist/style.css')
css('@uppy/dashboard/dist/style.css')

browserify -p sheetify ./src/app.js -o bundle.js

Sheetify встраивает CSS в ваш комплект JavaScript. Вы можете позже распаковать его в отдельный файл CSS (что лучше для производительности), используя css-extract .

0 голосов
/ 16 мая 2019

Я скорее использую Webpack, посмотрите это видео.Я надеюсь, что это помогает. КАК РАБОТАЕТ WEBPACK

...