Включить картинки в комплект JS - PullRequest
Новая
       30

Включить картинки в комплект JS

0 голосов
/ 15 марта 2019

Мой случай таков:

Я создаю библиотеку компонентов для React. Итак, у меня есть пакет (в комплекте с Rollup), который включает в себя несколько изображений (на данный момент только GIF-изображение, которое используется в компоненте).

Компонент, использующий мою картинку, выглядит так: 

import React from 'react';
import PropTypes from 'prop-types';
import ui_spinner from '../../../assets/ui_progress.gif';

/**
 * CircularSpinner
 * Add a spinner when the user needs to wait
 */
class CircularSpinner extends React.PureComponent {
  static propTypes = {
    /** Width of the component */
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Height of the component */
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Style of the component (overload existing properties) */
    style: PropTypes.object,
  }

  static defaultProps = {
    width: 128,
    height: 128,
    style: {},
  }

  render() {
    const { style, width, height } = this.props;

    return (
      <img src={ui_spinner} width={width} height={height} style={style} alt="ui_progress" aria-busy="true" />
    );
  }
}

export default CircularSpinner;

Когда я его построил, все нормально.

Теперь я создаю приложение React с помощью create-Reaction-app и хочу проверить библиотеку компонентов. Для этого я использую npm link (чтобы избежать принудительного развертывания моего пакета npm). Мои компоненты в моем тестовом приложении исправны, но изображение (GIF в моем компоненте CircularSpinner) не отображается.

Итак, мой вопрос заключается в следующем: как включить некоторые активы в комплект JS с помощью Rollup? Мой рабочий подход правильный?

Мой конфиг накопления следующий: 

import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import url from 'rollup-plugin-url'

const config = {
  input: 'src/index.js',
  external: ['react'],
  output: {
      format: 'umd',
      name: 'react-components',
      globals: {
          react: "React"
      }
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    uglify(),
    url(),
  ]
}
export default config

Я строю с rollup -c -o dist/index.js.

И папка dist имеет следующий контент: 

dist/
  assets
    92be5c546b4adf43.gif
  index.js

Мой компонент, использующий мою картинку, выглядит так в моем тестовом приложении:

<img src="92be5c546b4adf43.gif" width="128" height="128" alt="ui_progress" aria-busy="true">

Спасибо за вашу помощь!

Дэмиен

1 Ответ

0 голосов
/ 18 марта 2019

Я нашел решение этой проблемы.Этот ответ может кому-то помочь:

Я обновляю свою конфигурацию накопительного пакета, чтобы использовать rollup-plugin-img .Я уже использовал его, но моя конфигурация была неправильной:

Правильная конфигурация следующая: 

import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import image from 'rollup-plugin-img'

const config = {
  input: 'src/index.js',
  external: ['react'],
  output: {
      format: 'umd',
      name: 'react-components',
      globals: {
          react: "React"
      }
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    image({
      limit: 100000,
    }),
    uglify(),
  ]
}
export default config

Моя ошибка состояла в том, что мой GIF немного велик, и размер ограничения по умолчанию составляет8192 байта.В этом случае у меня появляется следующая ошибка: 

Error: Could not load <path of image> (imported by <path of component that use image>): The "path" argument must be of type string. Received type undefined

Когда я обновил свою конфигурацию для увеличения лимита, все в порядке

...