Почему моя библиотека компонентов React не доступна для дерева? - PullRequest
3 голосов
/ 30 января 2020

У меня есть библиотека компонентов 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

1 Ответ

1 голос
/ 30 января 2020

Я нашел одно возможное решение моей проблемы. Это не имеет ничего общего с тряской деревьев (поэтому я не приму этот ответ как правильный). Я просто делю библиотеку на несколько независимых блоков , используя довольно новую функцию накопительного пакета (мне пришлось обновить кучу зависимостей, чтобы она работала) и предоставляя объект, отображающий имена в точки входа, в свойство ввода конфигурации свертки. Это выглядит так:

input: {
    index: 'src/index.js',
    theme: 'src/Theme',
    badge: 'src/components/Badge',
    contentCard: 'src/components/ContentCard',
    card: 'src/elements/Card',
    icon: 'src/elements/Icon',
    ...

Вот документация для него: https://rollupjs.org/guide/en/#input

Выход установлен в каталог:

output: [
  {
    dir: 'dist/es',
    format: 'es',
  },
],

Затем я объявляю точку входа в моем пакете. json следующим образом:

"module": "dist/es/index.js",

В моем тестовом приложении я импортирую компоненты, как будто ничего не изменилось:

import React from 'react';
import { Theme, Badge } from 'my-react-component-library'

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

...