qual è il modo corretto di pubblicare un modulo componente React in NPM senza dipendenze esterne all'interno?

Question

Sto provando a pubblicare in NPM una libreria di componenti realizzata con React.

Non voglio che abbia dipendenze esterne, anche moduli React, per avere la dimensione del file più piccola possibile e perché l'utente aggiungerà queste dipendenze nell'app.

Sto usando npm e webpack per gestire le dipendenze.

• Questo è il mio package.json dipendenze:

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

• Nel mio file webpack.config.js devo punto di ingresso come 'component.jsx' e l'output come file '' lib.js

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

• Ho anche incluso l'attributo "externals" con i moduli react per evitare il webpack incluso nell'output 'lib.js'.

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

• Infine, questa è la semplice Reagire componente che voglio pubblicare:

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

ho pubblicato a NPM e installato in un altro progetto. Quando ho provato ad usarlo dopo l'importazione Reagire dichiarazione, mi dà un detto errore che reagiscono non definita (bundle.js: 28448 Uncaught ReferenceError: Reagire non è definita)

• Il mio codice per sondare la componente:

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

mi sto perdendo qualcosa nel dipendenze di configurazione?

Grazie

Answer 1

Webpack externals predefinito per il libraryTarget. Ciò significa che se non si specifica nulla, verrà emesso l'esterno come var e verrà visualizzato come variabile globale.

uscita Webpack usando globale:

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

    module.exports = react; 

/***/ }, 

Devi dire che a cercare la dipendenza nei moduli installati (a require esso). per fare ciò, cambia i tuoi aspetti esterni in:

Cambiamento richiesto (nel pacchetto web.config):

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

E poi sarà l'uscita utilizzando commonjs.

webpack uscita utilizzando commonjs:

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

    module.exports = require('react'); 

/***/ }, 

riferimento a webpack docs here.

Si noti che ho cambiato i file esterni in minuscolo, poiché il valore deve essere il nome della dipendenza da cercare (in tal caso, react e react-dom).

(A proposito, se non si vuole raggruppare qualsiasi node_module, Mi consiglia di utilizzare webpack-node-externals)

Answer 2

si stanno facendo file di output come lib.js ma durante il rendering che state leggendo bundle.js. Rinominare il file di output come bundle.js o includere lib.js nel proprio index.html al posto di includere bundle.js.

Answer 3

ho scritto una storia Media pieno perché ho avuto lo stesso problema come voi e non v'è alcuna informazione su di esso . Check it out: https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

La correzione principale è quello di aggiungere l'esterno 'react': 'commonjs react' nelle webpack.config.js presentare