Точный загрузчик с помощью Webpack & ES6

Question

Я пытаюсь интегрировать fine-uploader с приложением React/ES6, которое поставляется в комплекте через Webpack. Ищете руководство по включению пользователя с этим стеком.

В моей webpack.config.js я поставил псевдоним для Fine Uploader так:

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 лает на меня, хотя:

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 с прекрасным загрузчиком, так как i t ведет себя по старой школьной дороге, присоединившись к window.qq, и я бы предположил, что это не очень хорошо работает с загрузчиками модулей.

Answer 1

Выяснил это!

Во-первых, мне пришлось установить exports-loader для веб-пакета. Этот загрузчик будет прокладывать пакеты, не относящиеся к CommonJS/UMD/AMD, чтобы вы могли require или import их (read more here). Тогда я должен был изменить свой webpack.config.js, чтобы Призонная шайбу в qq пространства имен для типа Fine Uploader я использую (S3 в данном случае):

webpack.config.js:

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

Теперь я в состоянии import в qq Объект из Fine Uploader и доступ к нему, как обычно, за исключением того, что он не находится в глобальном пространстве имен. Выиграть!

Обратите внимание, что я должен был включить ref в элемент DOM, обработанный реакцией, поэтому 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';