jaki jest właściwy sposób opublikowania modułu komponentu React w NPM bez zewnętrznych zależności wewnątrz?

Question

Próbuję opublikować w NPM bibliotekę komponentów wykonaną przy użyciu React.

Nie chcę, aby jego zewnętrzne zależności, a nawet moduły React, miały najmniejszy możliwy rozmiar pliku, a użytkownik doda te zależności w aplikacji.

Używam npm i webpack do zarządzania zależnościami.

• To jest moje package.json zależności:

  "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" 
  } 
  

• W moim pliku webpack.config.js mam punktu wejścia jako 'component.jsx' i wyjścia jako pliku 'lib.js'

  // Source code entry 
  entry: { 
      lib: './src/components/component.jsx' 
  }, 
  
  // Code Output 
  output: { 
      path: PATHS.build, 
      filename: 'lib.js' 
  }, 
  

• Zawarłem również atrybut "externals" z modułami reagowania, aby uniknąć pakietu internetowego zawierającego go w wynikach "lib.js".

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

• Wreszcie jest to proste React składnik, który chcę rozpatrzenie:

  import React from 'react'; 
  
  export default class Component extends React.Component { 
  
      constructor() { 
      super(); 
      } 
  
      render() { 
      return (
       <h1>MY COMPONENT</h1> 
      ); 
      } 
  } 
  

opublikowałem go do KMP i zainstalowaniu go w innym projekcie. Kiedy próbowałem go używać po import React stwierdzenie, że daje mi powiedzenie o błędzie, które reagują nie jest zdefiniowana (bundle.js: 28448 Uncaught ReferenceError: React nie jest zdefiniowana)

• Mój kod sondy komponent:

  import React from 'react'; 
  import ReactDOM from 'react-dom'; 
  import Component from 'component'; 
  import $ from 'jquery'; 
  
  ReactDOM.render(
      <Component />, 
      $("#app") 
  ); 
  

Am I brakuje czegoś w config zależności?

Dzięki

Answer 1

Pakiet internetowy externals domyślnie jest ustawiony na libraryTarget. Oznacza to, że jeśli niczego nie określisz, wyprowadzi zewnętrzne jako var, i exepcts go jako zmienną globalną.

wyjście WebPACK stosując globalny:

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

    module.exports = react; 

/***/ }, 

Musisz powiedzieć go szukać w zależności od zainstalowanych modułów (do require IT). w tym celu zmień swoje zewnętrzne na:

Wymagana zmiana (w pakiecie sieci Web.config):

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

I wtedy będzie to wyjście używając commonjs.

WebPACK wyjściowe przy użyciu commonjs:

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

    module.exports = require('react'); 

/***/ }, 

odniesienia do webpack docs here.

Zauważ, że zmieniłem twoje zewnętrzne z powrotem na małe litery, ponieważ wartość powinna być nazwą zależności do wyszukania (w tym przypadku react i react-dom).

(Nawiasem mówiąc, jeśli nie chcesz, aby pakiet żadnego node_module, polecam korzystania webpack-node-externals)

Answer 2

robicie plik wyjściowy jako lib.js ale podczas renderowania jesteś czytanie bundle.js. Zmień nazwę pliku wyjściowego na bundle.js lub dołącz lib.js do swojego index.html zamiast bundle.js.

Answer 3

pisałem pełną Średni historię, bo miałem ten sam problem jak ty i nie ma informacji o tym . Sprawdź: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Głównym rozwiązaniem jest dodanie zewnętrznego 'react': 'commonjs react' w webpack.config.js złożyć