精细上传器与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屋!