У меня есть библиотека из нескольких реагирующих компонентов, и я хочу, чтобы дерево было стянуто, так что, когда я импортирую компонент, например
import { Checkbox } from 'my-react-components'
Я не импортирую весь комплект.
Мой index.js выглядит так
export { default as Button } from './components/Button'
export { default as Checkbox } from './components/Checkbox'
export { default as FlexView } from './components/FlexView'
export { default as Radio } from './components/Radio'
export { default as Select } from './components/Select'
export { default as TextInput } from './components/TextInput'
export { default as Toggle } from './components/Toggle'
И я связываю с помощью webpack
module.exports = {
mode: 'production',
entry: './src/index.ts',
output: {
path: path.resolve('./lib'),
filename: 'react-components.js',
libraryTarget: 'commonjs2',
},
// loaders and stuff...
// terser-webpack-plugin...
externals: {
// don't include react in the bundle
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
},
optimization: {
splitChunks: false,
sideEffects: false,
},
}
И, конечно, в моем бабелье
['@babel/preset-env', {
modules: false,
}]
С этой установкой, когда я импортирую только один компонент, и включается весь комплект (я использую webpack также при импорте). Как я могу это предотвратить?