Fine Uploader с Webpack и ES6

Question

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

В моем 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и я думаю, что это не очень хорошо работает с загрузчиками модулей.

Answer 1

Догадаться!

Сначала я должен был установить exports-loader для веб-пакета. Этот загрузчик будет шить не-CommonJS/UMD/AMD, чтобы вы могли require или же import их ( подробнее здесь). Тогда я должен был отредактировать мой 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, отображаемому в React, так что 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 и теперь они могут экспортировать модули. Это означает, что вы можете импортировать его в свой компонент без использования загрузчика экспорта в веб-пакете.

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';