精细上传器与Webpack& ES6 [英] Fine Uploader with Webpack & ES6

问题描述

我正在尝试将精细上传程序与通过Webpack捆绑的React / ES6应用程序进行集成。寻找关于如何使用此堆栈包含精细上传器的指导。

I am attempting to integrate fine-uploader with a React/ES6 application that is bundled via Webpack. Looking for guidance on how to include fine-uploader with this stack.

在我的 webpack.config.js中 I为精细上传设置了一个别名：

In my webpack.config.js I have set an alias for Fine Uploader like so:

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

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

And in my React component I have the following:

import React from 'react'

import 'fine-uploader'

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

Webpack吠叫我，虽然：

Webpack barks at me though:

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

我相当确定，由于它的行为是旧的方式通过附加到 window.qq ，我可以想象这对于模块加载程序来说不太好。

I'm fairly sure I need to shim the fine-uploader javascript somehow since it behaves the old school way by attaching itself to window.qq, and I'd imagine this doesn't play well with module loaders.

推荐答案

想出来！

首先，我必须安装 export-loader 的webpack。这个装载器将会填充非CommonJS / UMD / AMD软件包，以便您可以要求或 import 他们（在这里阅读更多）。然后，我不得不编辑我的 webpack.config.js 来填充 qq 命名空间中的精细上传器类型使用（在这种情况下为S3）：

First, I had to install the exports-loader for webpack. This loader will shim non-CommonJS/UMD/AMD bundles so you can require or import them (read more here). Then I had to edit my webpack.config.js to shim the qq namespace for the type of Fine Uploader I am using (S3 in this case):

webpack.config.js / p>

webpack.config.js:

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

现在我可以从 import 上传并按照通常的方式访问它，除了它不在全局命名空间上。 Win！

Now I am able to import the qq object from Fine Uploader and access it just as I would normally, except it's not on the global namespace. Win!

请注意，我必须在React渲染的DOM元素中添加一个 ref ，所以Fine Uploader知道哪里附加自己。另外，请注意使用 componentDidMount 来确保React已经呈现了元素 。

Note that I had to include a ref to the React-rendered DOM element so Fine Uploader knew where to attach itself. Also, note the use of componentDidMount to ensure the element has been rendered by React.

fine-uploader.jsx ：

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生态系统整合这个图书馆时，我可能会有更多的问题。

I'll probably have more questions as I try and integrate this library with React and the modern Javascript ecosystem.

这篇关于精细上传器与Webpack& ES6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！