Question

我正在尝试将精细上传器与通过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来表现旧的学校方式，而我想象这并不是与模块加载器配合使用。

Answer 1

想出来！

首先，我必须为webpack安装exports-loader。此加载程序将填充非CommonJS / UMD / AMD捆绑包，因此您可以require或import他们（read more here）。然后我不得不编辑我的webpack.config.js以填充我正在使用的Fine Uploader类型的qq命名空间（在这种情况下为S3）：

<强> webpack.config.js ：

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

现在我能够从Fine Uploader中import qq对象并像平常一样访问它，除非它不在全局命名空间中。赢了！

请注意，我必须在React呈现的DOM元素中包含ref，以便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生态系统集成时，我可能会有更多问题。

Answer 2

刚刚更新到NPM版本5.9.0，可以看到他们现在导出模块。这意味着您可以将其导入组件，而无需在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';

Webpack＆amp; ES6

2 个答案: