Как опубликовать компонент React без включения реакции

Я создаю компонент React и хочу его опубликовать.

Я вставил package.json:

  "peerDependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },

И ожидайте, что при сборке моего модуля с помощью веб-пакета мой компонент не будет кричать это:

 Module not found: Error: Can't resolve 'react'

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

Я проверил некоторые известные:

react-select реагировать-переключить

И они перечисляют реакции только в peerDependecies (и в devDependecies, я думаю, для целей тестирования и разработки). Если я добавлю реакцию на свои devDeps и запущу webpack -p, он успешно скомпилируется, но тогда у меня будет react в моем комплекте компонентов.

Вот моя простая конфигурация веб-пакета

Что мне не хватает?

ОБНОВЛЕНИЕ Я добавил «внешний» параметр в конфигурацию веб-пакета (суть обновлена), при этом он компилируется правильно, он не включает React в пакет, но когда я импортирую его в проект с React для использования это дает мне:

Не удается прочитать свойство «Компонент» неопределенного

как только он найдет React.Component моего компонента...


webpack reactjs javascript
person ciaoben    schedule 16.10.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете установить его как peerDependency, но также добавить как devDependency, чтобы установить его локально. убедитесь, что это external в конфигурации веб-пакета. Это все, что вам нужно

см. https://webpack.js.org/configuration/externals/#object

  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    },
    'prop-types': {
      root: 'PropTypes',
      commonjs2: 'prop-types',
      commonjs: 'prop-types',
      amd: 'prop-types'
    }
  },

  output: {
    publicPath: '/',
    filename: '[name]',
    library: "foobar",
    libraryTarget: 'umd',
  }

при употреблении:

"dependencies": { 
  "foobar": "1.0.0",
  "react": "~16.0.0",
  "react-dom": "~16.0.0",
  "prop-types": "^15.6.0"
}
person Dimitar Christoff    schedule 16.10.2017
comment
Спасибо, но я добавил внешние параметры (вы можете увидеть обновленную суть вопроса), он компилируется, не включает React, как я хотел, но когда я импортирую его в проект с React и import, он терпит неудачу со свойством Cannot read ' Компонент' неопределенного, когда он читает React.Component - person ciaoben; 16.10.2017
comment
проект, который его потребляет, должен быть установлен, чтобы он мог его восстановить. когда вы npm install, если не там, peerDependenices должен скулить и потенциально ломать сборки и т. д. Кроме того, у вас могут быть разные цели сборки, такие как UMD или CJS, — убедитесь, что они непротиворечивы. Я обновил свой ответ, включив в него типичную настройку - person Dimitar Christoff; 16.10.2017
comment
PS не может получить доступ к gists, заблокированным корпоративным брандмауэром, предназначенным для предотвращения утечки кода... - person Dimitar Christoff; 16.10.2017
comment
Npm не предупреждает меня о неправильных peerDeps в этом случае... и в том же файле я добавил свой компонент, который я уже импортирую, реагирую и использую его для других компонентов.-- - person ciaoben; 16.10.2017