Was ist der richtige Weg, um ein React-Komponentenmodul in NPM ohne externe Abhängigkeiten zu veröffentlichen?

Question

Ich versuche, in NPM eine mit React erstellte Komponentenbibliothek zu veröffentlichen.

Ich möchte nicht, dass es externe Abhängigkeiten, sogar React-Module, um die kleinstmögliche Dateigröße haben und weil der Benutzer diese Abhängigkeiten in der App hinzufügen wird.

Ich verwende npm und webpack, um die Abhängigkeiten zu verwalten.

• Das ist meine package.json Abhängigkeiten:

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

• In meiner webpack.config.js Datei habe ich Einstiegspunkt als 'component.jsx' und Ausgabe als 'lib.js' Datei

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

• Ich habe auch das "externals" -Attribut mit den reaktiven Modulen eingeschlossen, um das webpack zu vermeiden, das es in die 'lib.js' Ausgabe einschließt.

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

• Schließlich ist dies die einfache Komponente reagieren, die ich veröffentlichen möchte:

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

ich es NPM veröffentlicht und in einem anderen Projekt installiert. Als ich versuchte, es zu verwenden, nachdem Import-Anweisung React, es mir eine Fehlermeldung, gibt, die nicht definiert ist React (bundle.js: 28448 Uncaught Reference: React ist nicht definiert)

• Mein Code, um die Komponente zu sondieren:

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

Bin ich etwas in der Abhängigkeiten Config fehlt?

Dank

Answer 1

Das Webpack externals ist standardmäßig libraryTarget. Das heißt, wenn Sie nichts angeben, wird das externe Objekt als var ausgegeben und als globale Variable ausgegeben.

Webpack Ausgabe mit global:

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

    module.exports = react; 

/***/ }, 

Sie müssen es sagen, für die Abhängigkeit in den installierten Modulen suchen (zu require it). Um dies zu tun, ändern Sie Ihre externen Daten zu:

Erforderliche Änderung (in Webpack.config):

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

Und dann wird es Ausgabe, die es mit Commonjs.

Webpack Ausgabe mit Commonjs:

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

    module.exports = require('react'); 

/***/ }, 

Verweis auf webpack docs here.

Beachten Sie, dass ich Ihre Externals zurück in Kleinbuchstaben geändert habe, da der Wert der zu suchende Abhängigkeitsname sein sollte (in diesem Fall react und react-dom).

(By the way, wenn Sie irgendeine node_module zu bündeln nicht wollen, empfehle ich webpack-node-externals)

Answer 2

Sie machen Ausgabedatei als lib.js aber beim Rendern Sie bundle.js lesen. Bitte benennen Sie entweder die Ausgabedatei als bundle.js um oder fügen Sie lib.js in Ihre index.html anstelle von bundle.js ein.

Answer 3

ich eine volle Mittel Geschichte schrieb, weil ich, wie Sie das gleiche Problem hatte und es gibt es keine Informationen über . Check it out: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Der Haupt fix ist die externe 'react': 'commonjs react' in den webpack.config.js hinzufügen