javascript - 向上 : How to use with module bundler?

Question

Uppy 建议在 CDN 上使用 bundler ，我理解原因 — 但我对它们不太熟悉。

起初，我尝试了 Browserify，因为它看起来非常简单，但我很难要求 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

Browserify 默认不支持 CSS 文件。文档示例采用 webpack，可能应该更改它!有几个选项:

• 为 CSS 文件单独构建——你可以使用 PostCSS 来实现和 postcss-import插件。

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

然后你可以添加一个单独的<style>引用 bundle 的 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 文件(这对性能更好)。 .