type - Escribiendo plugin Javascript incrustado con React & Webpack

webpack react js

Question

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!

Answer 1

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!

Answer 2

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 ...