как правильно опубликовать модуль компонента React в NPM без внешних зависимостей внутри?

Я пытаюсь опубликовать в NPM библиотеку компонентов, сделанную с помощью React.

Я не хочу, чтобы у него были внешние зависимости, даже модули React, чтобы иметь наименьший возможный размер файла и потому, что пользователь добавит эти зависимости в приложение.

Я использую npm и webpack для управления зависимостями.

  • это мой package.json зависимости:

    "devDependencies": {
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.13.0",
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
 "peerDependencies": {
   "react": "^15.0.2",
   "react-dom": "^15.0.2"
 }

  • в своем у меня есть точка входа как компонент.jsx "и выводится как" lib.файл js

    // Source code entry
entry: {
  lib: './src/components/component.jsx'
},

// Code Output 
output: {
  path: PATHS.build,
  filename: 'lib.js'
},

  • Я также включил атрибут "externals" с модулями react, чтобы избежать включения webpack в " lib.выход js.

    externals: {
  'react': 'React',
  'react-dom' : 'ReactDOM'
}

  • наконец, это простой компонент React, который я хочу опубликовать:

    import React from 'react';

export default class Component extends React.Component {

  constructor() {
    super();
  }

  render() {
    return (
      <h1>MY COMPONENT</h1>
    );
  }
}

я опубликовал его в NPM и установил его в другом проекте. Когда я попытался использовать его после инструкции Import React, он дает мне ошибка, говорящая, что React не определен (bundle.js: 28448 Uncaught ReferenceError: React не определен)

  • мой код для зондирования компонента:

    import React from 'react';
import ReactDOM from 'react-dom';
import Component from 'component';
import $ from 'jquery';

ReactDOM.render(
   <Component />,
   $("#app")
);

Я что-то пропустил в конфигурации зависимостей?

спасибо

8
components dependencies npm reactjs

3 ответов

Webpack externals значения по умолчанию для libraryTarget. Это означает, что если вы ничего не укажете, он выведет внешний as var, и exepcts это глобальная переменная.

вывод Webpack с помощью global:

/* 76 */
/***/ function(module, exports) {

    module.exports = react;

/***/ },

вам нужно сказать ему, чтобы искать зависимость в установленных модулях (до require его). для этого измените внешние параметры на:

требуемое изменение (в webpack.config):

externals: {
  'react': 'commonjs react',
  'react-dom' : 'commonjs react-dom'
}

и затем он выведет его с помощью commonjs.

вывод Webpack с помощью commonjs:

/* 76 */
/***/ function(module, exports) {

    module.exports = require('react');

/***/ },

ссылка документы webpack здесь.

обратите внимание, что я изменил ваши внешние значения обратно в нижний регистр, так как значение должно быть именем зависимости для поиска (в этом случае, react и react-dom).

(кстати, если вы не хотите связывать какой-либо node_module, я рекомендуем использовать webpack-узел-экстрималов)

4

вы делаете выходной файл как lib.js но во время рендеринга Вы читаете bundle.js. Переименуйте любой выходной файл как bundle.js или включить lib.js в своем index.html в том числе bundle.js.

0

Я написал Полный рассказ, потому что у меня была та же проблема, что и у вас, и нет никакой информации об этом. Проверьте это: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

основное исправление-добавить внешний 'react': 'commonjs react' в webpack.конфиг.файл JS

0