Использование накопительного пакета для библиотеки компонентов React - PullRequest
Новая
       31

Использование накопительного пакета для библиотеки компонентов React

0 голосов
/ 11 декабря 2018

Я начинаю немного узнавать о пакетировании, поскольку работаю над обновлением небольшой внутренней библиотеки компонентов React, в которой используется свертка.

Текущее состояние

Rightтеперь все компоненты объединяются в один index.js файл.И всякий раз, когда я импортирую один или несколько ... 

import { Button, Input } from 'my-library';

... импортируется вся библиотека.Я бы хотел это исправить.

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

import Button from 'my-library/Button';

Это нормально, когда я используютолько один компонент, но всякий раз, когда мне нужно больше одного, возникает необходимость иметь, например, пять строк импорта из одной и той же библиотеки.Но всякий раз, когда я снова пытаюсь их деструктурировать, импортируется вся библиотека.

Цель

Я хотел бы иметь возможность запускать ту же самую деструктурированную инструкцию импорта извыше, но только импортируйте эти два компонента.

rollup.config 

export default {
  experimentalCodeSplitting: true,
  input: [
    'src/index.js',
    'src/components/Button/Button.js',
    'src/components/Input/Input.js',
  ],
  output: {
    exports: 'named',
    dir: 'dist/',
    format: 'cjs',
    chunkFileNames: 'chunks/[name]-[hash].js',
  },
  plugins: [
    external(),
    babel({ exclude: 'node_modules/**', plugins: ['external-helpers'] }),
    resolve(),
    commonjs(),
  ],
};

index.js 

import Button from './components/Button/Button';
import Input from './components/Input/Input';

exports.Button = Button;
exports.Input = Input;

Таким образом, для каждого компонента создаются два файла, Button.js и Input.js, что замечательно.Но возможно ли ввести оба компонента без остальной библиотеки в одном операторе import?

Заметки

  • Библиотека в настоящее времяиспользуется Rollup, но я не думаю, что нужно , если есть более простое решение.

  • Мне кажется, что использование функции experimentalCodeSplitting не идеальное решениедля этого и мне не очень нравится иметь файлы чанка.

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

...