Quiero cargar un componente en mi aplicación React externamente desde mi archivo incluido en el paquete web. Para elaborar mi punto, aquí hay un archivo HTML de muestra que quiero tener:
<!doctype html> <html> <head> ... </head> <body> <div id="app"></div> <script src="/dist/app.js"></script> <script src="/external-component/timer-component.js"></script> </body> </html> Básicamente, quiero poder cargar el componente del temporizador, pero hacer que ese componente dependa de app.js (archivo incluido en el paquete web) ya que app.js tiene React. En otras palabras, quiero que el componente del temporizador sepa que React existe. Mi archivo de componente de temporizador actual es el siguiente (tomado del sitio web de ReactJS):
class Timer extends React.Component { constructor(props) { super(props); this.state = { secondsElapsed: 0 }; } tick() { this.setState(prevState => ({ secondsElapsed: prevState.secondsElapsed + 1 })); } componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return React.createElement( "div", null, "Seconds Elapsed: ", this.state.secondsElapsed ); } }Sigo recibiendo el error de que React no existe. Si intento importar React:
const React = require('react'); // or import React from 'react';Recibo un error que requiere (o importar) no está definido. ¿Cuál es la forma correcta de hacerlo? Tengo entendido que el archivo webpack app.js crea espacios de nombres, por lo que el componente React realmente no ve el mundo exterior. Solo los componentes dentro del archivo webpack ven React. Si este es el caso, ¿cómo puedo exponer reaccionar al mundo exterior?
Creo que desea utilizar el complemento "script-loader" para Webpack. Lo uso para hacer precisamente esto y funciona muy bien.
https://github.com/webpack/script-cargador
Es una excelente manera de mantener todas las cosas fuera de index.html y poner todos sus requisitos en un solo lugar, por ejemplo, mi proyecto semilla index.js tiene todo esto, y en otros proyectos todo lo que tengo que hacer es agregar scripts aquí cuando Necesito. Ni siquiera tienen que estar instalados con npm, solo puede tener un script en su proyecto y cargarlo en el paquete de esta manera.
(Uno de mis proyectos usando el cargador de scripts de webpack)
require('!!script!core-js/client/shim.js'); require('!!script!zone.js/dist/zone.js'); require('!!script!reflect-metadata/temp/Reflect.js'); require('!!script!rxjs/bundles/Rx.js'); require('!!script!@angular/core/bundles/core.umd.js'); require('!!script!@angular/common/bundles/common.umd.js'); require('!!script!@angular/compiler/bundles/compiler.umd.js'); require('!!script!@angular/platform-browser/bundles/platform-browser.umd.js'); require('!!script!@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'); require('!!script!@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js'); require('!style!css!./css/styles.css'); require('!style!css!./css/animate.css'); require('!style!css!bootstrap/dist/css/bootstrap.css'); require('./app/main');En algún lugar de su app.js, declare reaccionar como una variable global. window.React = React
De esta manera puede acceder a él desde otros componentes.
Otra forma de hacer esto sería externalizar la reacción de la compilación del paquete web e incluirla a través de una etiqueta de secuencia de comandos en la página.
Para externalizar reaccionar, incluya esto en la configuración externals: {'react': 'React'}
Incluya esto en su html para acceder a reaccionar globalmente.
<script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>