Как я могу экспортировать несколько компонентов React в повторно используемый пакет NPM, чтобы они могли импортироваться независимо и исключать зависимости из комплектов приложений?

Question

Могу ли я создать пакет NPM, содержащий несколько компонентов React, которые можно независимо импортировать в приложениях-потребителях?

У меня есть пакет NPM с двумя повторно используемыми компонентами React. Один компонент импортирует большую / большую библиотеку сторонних производителей. Другой компонент не импортирует эту стороннюю библиотеку.

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

Есть ли способ настроить пакет многократного использования, который не будет включать «тяжелую библиотеку» в моем комплекте приложений, если я не использую компонент HeavyWeight?

// My NPM package
// components/HeavyWeight.js
import React from 'react';

import heavyLibrary from 'heavy-library'; // This component imports a very heavy library

const HeavyWeight = () => {
  const a = heavyFunction();
  return (
    <div>
      {a}
    </div>
  );
}

export default HeavyWeight;


// components/LightWeight.js 
import React from 'react';

const LightWeight = () => {
  return (
    <div>
      I'm light weight.
    </div>
  );
}

export default LightWeight;


// index.js
import HeavyWeight from './components/HeavyWeight';
import LightWeight from './components/LightWeight';

export { HeavyWeight, LightWeight};

// webpack.config.js
// ...
module.exports = {
  //...
  externals: {
    heavy-library: 'heavy-library'
  }
};


// Two of my apps using my reusable components
// appA.js
// Bundling this app should include 'heavy-library' in final webpack bundle
import { HeavyWeight } from 'reusable-package';

// appB.js
// Bundling this app should not include 'heavy-library' in final webpack bundle
import { LIghtWeight } from 'reusable-package';