Webpack＆ES6付きファインアップローダ

Question

ファインアップローダをWebpackでバンドルされたReact/ES6アプリケーションと統合しようとしています。このスタックにファインアップローダーを含める方法のガイダンスを探しています。

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

そして、私の中には、コンポーネントを反応させるの私は、次のしている：

import React from 'react' 

import 'fine-uploader' 

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

のWebPACKはしかし私に吠え：

を、私はそうのようなファインアップローダのエイリアスを設定している私の webpack.config.jsで

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を何とかシムにする必要があると確信していますtはそれ自体をwindow.qqに添付することによって古い学校の仕方を振る舞い、これはモジュールローダーではうまくいかないと思います。

Answer 1

それを実感してください！

まず、webpack用にexports-loaderをインストールする必要がありました。このローダーは非CommonJS/UMD/AMDバンドルをシムしますので、requireまたはimport（read more here）とすることができます。

webpack.config.js：

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

は今、私はimportにできる午前それから私は、私は（この場合にはS3）を使用していますファインアップローダのタイプにqq名前空間をシムに私webpack.config.jsを編集する必要がありましたqqオブジェクトをFine Uploaderから取得して、通常の場合と同様にアクセスします。ただし、グローバルな名前空間には存在しません。勝つ！

React-rendered DOM要素にrefを含めなければならなかったので、Fine Uploaderはどこにアタッチするかを知っていました。また、がにReactによってレンダリングされていることを確認するためにcomponentDidMountの使用に注意してください。

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 

私がしようとすると反応し、近代的なJavascriptのエコシステムでこのライブラリを統合すると、私はより多くの質問がおそらくあるでしょう。

Answer 2

NPMリリース5.9.0に更新され、モジュールをエクスポートできるようになりました。これは、webpack内のエクスポートローダーを使用せずにコンポーネントにインポートできることを意味します。

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

もこれはファインアップローダ5.8.0に今はるかに簡単である

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

S3ローダー用

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