Uppy:如何使用模块捆绑器？

Question

- but推荐使用捆绑器而不是CDN，我理解为什么Uppy我不太熟悉它们。

起初，我尝试了Browserify，因为它看起来非常简单，但我很难require CSS文件。进一步的研究让我觉得，也许Webpack会更好。

但Webpack让我不知所措，- I真的可以用一个例子来说明如何使用这两个捆绑器中的任何一个来编译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

默认情况下，Browserify不支持CSS文件。文档示例假设为webpack，它可能需要更改！有几个选项：

• 有一个单独的CSS文件构建--你可以用PostCSS和postcss-import插件来实现。

// app.css
@import '@uppy/core/dist/style.css';
@import '@uppy/dashboard/dist/style.css';

然后，您可以添加一个单独的<style>标记来引用捆绑的CSS文件。

像sheetify.一样，

• 使用CSS插件来实现browserify

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文件中(这对性能更好)。

Answer 2

我宁可用Webpack，看一下这个视频。我希望它能帮上忙。HOW DOES WEBPACK WORK