带有 Webpack 和 ES6 的精细上传器

IT技术 reactjs ecmascript-6 webpack fine-uploader
2021-05-23 00:16:30

我正在尝试将 Fine-uploader 与通过 Webpack 捆绑的 React/ES6 应用程序集成。寻找有关如何在此堆栈中包含精细上传器的指南。

在我的webpack.config.js我为 Fine Uploader 设置了一个别名，如下所示：

resolve: {
    alias: {
      'fine-uploader': path.resolve('node_modules/fine-uploader/s3.fine-uploader')
    }
}

在我的 React 组件中，我有以下内容：

import React from 'react'

import 'fine-uploader'

export default () => {
  return <h1>Fine Uploader</h1>
}

然而，Webpack 对我咆哮： 

Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mfeltner/code/yden/foo/node_modules/fine-uploader/s3.fine-uploader in /Users/mfeltner/code/yden/foo/static/common/containers/fine-uploader
 @ ./static/common/containers/fine-uploader/fine-uploader.jsx 11:20-44

我相当确定我需要以某种方式填充精细上传器 javascript，因为它通过将自身附加到 来表现老派的方式window.qq，我想这与module加载器不能很好地配合。

2个回答

弄清楚了！

首先，我必须安装exports-loaderfor webpack。此加载程序将填充非 CommonJS/UMD/AMD 包，以便您可以require或import它们（在此处阅读更多内容）。然后我必须编辑 mywebpack.config.js以填充qq我正在使用的 Fine Uploader 类型的命名空间（在这种情况下为 S3）：

webpack.config.js：

module: {
    loaders: [
        {
            test: /s3\.fine-uploader\.js/,
            loader: 'exports?qq'
        }
    ]
}

现在，我能够import在qq从精细上传对象，访问它，就像我通常会，但它不是全局命名空间。赢！

请注意，我必须ref在 React 渲染的 DOM 元素中包含 a ，以便 Fine Uploader 知道将自身附加到何处。另外，请注意使用componentDidMount来确保元素已被 React 渲染。

fine-uploader.jsx：

import React from 'react'

import qq from 'fine-uploader/s3.fine-uploader'

class FU extends React.Component {
  constructor (props) {
    super(props)
  }

  componentDidMount () {
    const fu = new qq.s3.FineUploaderBasic({
      button: this.refs.fu
    })
  }

  render () {
    return <div ref='fu'>Upload!</div>
  }
}

export default FU

当我尝试将这个库与 React 和现代 Javascript 生态系统集成时，我可能会有更多问题。

刚刚更新到 NPM 版本 5.9.0，可以看到它们现在导出module。这意味着您可以将其导入到您的组件中，而无需使用 webpack 中的导出加载器。

import qq from 'fine-uploader/fine-uploader/fine-uploader.js';

也适用于

import qq from 'fine-uploader/lib/traditional';

供 s3 加载器使用

import qq from 'fine-uploader/lib/s3';

其它你可能感兴趣的问题
上一篇如何在 react js 中显示入门弹出窗口？ 下一篇NextJS React - WebpackError：未定义窗口