Блог

Количество проектов нашей компании растет, поэтому мы решили перенести наш ui kit в отдельный частный пакет npm. Для сборки комплекта перед публикацией мы решили использовать накопительный пакет. Файловая структура для ui kit довольно стандартная, мы:

 src
       - Components
         - Alert
         - Button
         - Heading
         - ...
       HOC, static...

       - index.js
 

Корень index.js файл используется только для повторного экспорта всех компонентов.

 export {default as Alert} from './Components/Alert';
export {default as Button} from './Components/Button';
...
 

Наша главная цель — иметь возможность получать компоненты из нашего набора, используя именованный импорт.

 import {Alert, Button} from '@company/ui-kit';
 

Также важно правильно работающее встряхивание дерева, потому что некоторые из наших проектов используют только 2/31 компонент из комплекта, поэтому мы хотим видеть в окончательной сборке только те компоненты, которые были использованы, и это главная проблема. Мы перепробовали множество вариантов конфигурации свертки с одним выходным файлом или фрагментами и поняли, что встряхивание дерева работает только с фрагментами, и что более интересно, оно работает только с прямым импортом фрагмента, а не с именованным импортом из index.js .

 import Alert from '@company/ui-kit/Alert'; // tree shaking works, only Alert get into build
import {Alert} from '@company/ui-kit'; // tree shaking not working, all kit components are got into the build
 

Может ли кто-нибудь объяснить мне, почему это происходит? И есть ли какой-либо способ использовать именованный импорт с правильно работающим встряхиванием дерева. Что также очень любопытно, мы пытались протестировать встряхивание дерева с именованным импортом в некоторых популярных библиотеках, таких как material ui, и там это тоже не работает. Встряхивание дерева работает только при прямом импорте из чанка.

Также необходимо упомянуть, что мы тестировали встряхивание дерева только в проектах, созданных с помощью create-react-app. Я действительно не думаю, что проблема может быть внутри конфигурации create-react-app bundler, но, возможно, это поможет разобраться в этом.

Для полной картины также прикрепляем нашу конфигурацию свертки:

 import multiInput from 'rollup-plugin-multi-input';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import copy from 'rollup-plugin-copy'
import postcss from 'rollup-plugin-postcss';
import postcssUrl from 'postcss-url';
import asset from "rollup-plugin-smart-asset";

export default {
    input: ['src/index.js', 'src/Components/**/*.js'],
    output: [
        {
            dir: './',
            format: 'cjs',
            sourcemap: true,
            exports: 'auto',
            chunkFileNames: '__chunks/[name]_[hash].js'
        }
    ],
    plugins: [
        multiInput({relative: 'src/'}),
        external(),
        postcss({
            modules: false,
            extract: true,
            minimize: true,
            sourceMap: true,
            plugins: [postcssUrl({url: 'inline', maxSize: 1000})],
        }),
        copy({targets: [{src: 'src/static/icons/fonts/*', dest: 'fonts'}]}),
        babel({exclude: 'node_modules/**'}),
        asset({url: 'copy', keepImport: true, useHash: false, keepName: true, assetsPath: 'assets/'}),
        resolve(),
        commonjs({include: 'node_modules/**'})
    ]
};
 

Заранее спасибо за ваши ответы!