我正在尝试将 Fine-uploader 与通过 Webpack 捆绑的 React/ES6 应用程序集成。寻找有关如何将精细上传器包含在此堆栈中的指导。
In my 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
,我想这对于模块加载器来说效果不佳。
弄清楚了!
首先,我必须安装exports-loader https://www.npmjs.com/package/exports-loader对于网页包。该加载程序将填充非 CommonJS/UMD/AMD 捆绑包,以便您可以require
or import
them (在这里阅读更多内容 https://webpack.github.io/docs/shimming-modules.html#exporting)。然后我不得不编辑我的webpack.config.js
垫片qq
我正在使用的 Fine Uploader 类型的命名空间(在本例中为 S3):
webpack.config.js
:
module: {
loaders: [
{
test: /s3\.fine-uploader\.js/,
loader: 'exports?qq'
}
]
}
现在我能够import
the qq
从 Fine Uploader 中获取对象并像平常一样访问它,只是它不在全局命名空间上。赢!
请注意,我必须包括一个ref
到 React 渲染的 DOM 元素,以便 Fine Uploader 知道将自己附加到哪里。另外,请注意使用componentDidMount
以保证元素has由 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 生态系统集成时,我可能会有更多问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)