У меня есть библиотека компонентов React , которую я объединяю с накопительным пакетом. Затем я использую эту библиотеку в настройке приложения с помощью create-реагировать на приложение, которое использует Webpack под капотом. Я ожидаю, что Webpack потрясет библиотеку компонентов. После создания пакета приложения и его анализа я вижу, что библиотека либо вообще не была потрясена деревом, либо что встряхивание дерева не сработало с библиотекой, потому что в первую очередь она не потрясена деревом. Почему тряска деревьев не работает? Что я делаю не так?
rollup.config. js (конфигурация пакета библиотеки компонентов React)
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import autoExternal from 'rollup-plugin-auto-external'
import resolve from 'rollup-plugin-node-resolve'
import reactSvg from 'rollup-plugin-react-svg'
import url from 'rollup-plugin-url'
import string from 'rollup-plugin-string'
import pureanno from 'rollup-plugin-pure-annotation'
import pkg from './package.json'
const { getSVGOConfig } = require('./scripts/getSVGOConfig')
const MAX_INLINE_FILE_SIZE_KB = 100
export default {
input: 'src/index.js',
output: [
{
file: pkg.module,
format: 'es',
},
],
plugins: [
autoExternal(),
babel({
babelrc: false,
exclude: 'node_modules/**',
plugins: [
'external-helpers',
'babel-plugin-transform-react-jsx',
'babel-plugin-transform-class-properties',
'babel-plugin-transform-object-rest-spread',
'transform-react-remove-prop-types',
[
'babel-plugin-root-import',
{
'rootPathSuffix': 'src',
},
],
'babel-plugin-styled-components',
'transform-decorators-legacy',
[
'ramda',
{
'useES': true,
},
],
],
}),
resolve(),
commonjs(),
reactSvg({
svgo: getSVGOConfig(),
}),
url({
limit: MAX_INLINE_FILE_SIZE_KB * 1024,
include: ['**/*.woff', '**/*.woff2'],
}),
string({
include: '**/*.css',
}),
pureanno({
includes: ['**/*.js'],
}),
],
watch: {
chokidar: false,
},
}
src / index. js библиотеки компонентов React
export { default as Theme } from './Theme'
export { default as Badge } from './components/Badge'
...
Приложение. js (приложение, использующее библиотеку)
import React from 'react';
import { Theme, Badge } from 'my-react-component-library'
function App() {
return (
<Theme>
<Badge>Hello</Badge>
</Theme>
)
}
export default App
пакет. json библиотеки компонентов React (соответствующие части)
{
"name": "my-react-component-library",
"version": "1.1.1",
"main": "dist/index.js",
"module": "dist/index.es.js",
"scripts": {
...
"build": "rollup -c",
},
"dependencies": {
...
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
},
"devDependencies": {
...
},
"sideEffects": false
}
пакет. json приложения, использующего библиотеку (соответствующие части)
{
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"my-react-component-library": "^1.1.1",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"scripts": {
...
"analyze": "source-map-explorer build/static/js/*chunk*.js build/static/js/*chunk*.js.map",
"build": "react-scripts build",
"serve": "serve -s build"
},
"devDependencies": {
...
"serve": "^11.3.0",
"source-map-explorer": "^2.2.2"
}
}
index.es. js (связанная библиотека компонентов реакции)
https://gist.github.com/borisdiakur/ae376738955f15fb5079b5acb2ac83ad