you type react que plugin need may appropriate javascript reactjs webpack

type - Escribiendo plugin Javascript incrustado con React & Webpack



webpack react js (2)

Así que encontré una solución para esto, como se describe here

Si cambio mi archivo webpack.config.js para agregar los siguientes atributos al objeto de output , es decir

var config = { // ... output: { // ... library: ''MyApp'', libraryTarget: ''umd'', umdNamedDefine: true, } }

Esto especifica el archivo que estoy empaquetando con webpack como un módulo UMD, por lo que si tengo una función en ese archivo y la exporto ...

export const init = (config) => { ReactDOM.render(<MyReactApp config={config} />, someSelector); }

Entonces puedo, en mi cliente, hacer lo siguiente.

<script src="./bundle.js" type="text/javascript"></script> <script type="text/javascript"> MyApp.init({ some: "config" }); </script>

Y mi aplicación React rinde.

Si alguien piensa que esta es una manera tonta de hacerlo, ¡me encantaría escucharlo!

Quiero poder empaquetar mi aplicación React con Webpack de modo que las copias distribuidas puestas en un CDN se puedan obtener, llamar e inicializar con un montón de configuraciones relevantes para un cliente.

Después de leer this y this , estoy configurando el archivo de entrada de mi paquete web de la siguiente manera:

// ... React requires etc. (() => { this.MyApp = (config) => { // some constructor code here } MyApp.prototype.init = () => { ReactDOM.render(<MyReactApp config={MyApp.config} />, someSelector); } })();

La idea es que en mi cliente, puedo hacer algo como lo siguiente:

<script src="./bundle.js" type="text/javascript"></script> <script type="text/javascript"> MyApp.init({ some: "config" }); </script>

Y mi función de MyApp#init renderizará mi aplicación React dentro de algún contenedor en el cliente.

¿Estoy pensando en esto de la manera correcta? ¿Hay una manera más simple o más eficiente de hacer esto?

Mi error es Error de tipo no Uncaught TypeError: Cannot set property ''MyApp'' of undefined , ya que this dentro del IIFE undefined está undefined . Realmente me gustaría entender por qué está sucediendo esto y consejos sobre cómo solucionarlo.

¡Gracias por adelantado!


Tienes recinto alrededor de tu clase.

MyApp debe exportarse o adjuntarse al objeto de la ventana global antes de poder llamarlo así.

En su situación, en realidad no está llamando a MyApp.init () pero está llamando a window.MyApp.init (), pero la ventana de objeto global no tiene el objeto MyApp adjunto.

// ... Simple attaching MyApp to the window (as a function) window.MyApp = (config) => { ... } // ... Using class and export class MyApp { constructor(config){...} } export default MyApp // or simply attach to the window window.MyApp = MyApp

Preferiría crear una clase y exportar un módulo usando la exportación. Luego cree otro archivo solo para adjuntarlo a la ventana. Dado que no se considera una buena práctica adjuntar clases a la ventana de esa manera.

// Import module and attach it to the window import MyApp from ''.my-app'' window.MyApp = MyApp

Puedes buscar opciones avanzadas de exportar módulos como UMD, AMD ...