Question

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)
})

Answer 1

我宁愿使用Webpack，也请观看此视频。希望对您有所帮助。 HOW DOES WEBPACK WORK

Answer 2

Browserify默认情况下不支持CSS文件。 docs示例假定使用webpack，可能应该对其进行更改！有几种选择：

具有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-extract将其提取到一个单独的CSS文件中（这对性能更好）。

Uppy：如何与模块捆绑器一起使用？

2 个答案: