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

【问题标题】：Uppy: How to use with module bundler?Uppy：如何与模块捆绑器一起使用？
【发布时间】：2019-05-15 21:19:19
【问题描述】：

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

【问题讨论】：

标签： javascript webpack bundler browserify

【解决方案1】：

Browserify 默认不支持 CSS 文件。文档示例假设 webpack，它可能应该被改变！有几种选择：

为 CSS 文件单独构建 - 您可以使用 PostCSS 和 postcss-import 插件来完成此操作。

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

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

为 browserify 使用 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 文件（这对性能更好）。

【讨论】：

【解决方案2】：

我更喜欢使用 Webpack，看看这个视频。我希望它有帮助。 HOW DOES WEBPACK WORK

【讨论】：