javascript - pagina - evitar cache html

Requerir archivos JS dinámicamente en tiempo de ejecución usando el paquete web

Question

Estoy tratando de portar una biblioteca desde grunt / requirejs a un paquete web y tropecé con un problema, que puede ser un factor decisivo para este esfuerzo.

La biblioteca que intento portar tiene una función que carga y evalúa múltiples módulos, en función de sus nombres de archivo que obtenemos de un archivo de configuración, en nuestra aplicación. El código se ve así (café):

loadModules = (arrayOfFilePaths) ->
  new Promise (resolve) ->
    require arrayOfFilePaths, (ms...) ->
      for module in ms
        module ModuleAPI
      resolve()

El require aquí necesita ser llamado en tiempo de ejecución y comportarse como lo hizo con requireJS. Webpack parece que solo se preocupa por lo que sucede en el "proceso de compilación".

¿Esto es algo que a la webpack no le importa? Si es así, ¿puedo seguir usando requireJS con él? ¿Cuál es una buena solución para cargar activos dinámicamente durante el tiempo de ejecución?

edit: loadModule puede cargar módulos, que no están presentes en el tiempo de compilación de esta biblioteca. Serán provistos por la aplicación, que implementa mi biblioteca.

Answer 1

Así que descubrí que mi requisito de tener algunos archivos cargados en tiempo de ejecución, que solo están disponibles en "tiempo de compilación de la aplicación" y no en "tiempo de compilación de la biblioteca", no es posible con el paquete web.

Cambiaré el mecanismo, para que mi biblioteca ya no requiera los archivos, pero necesita pasar los módulos requeridos. Algo me dice, esta será la mejor API de todos modos.

editar para aclarar:

Básicamente, en lugar de:

# in my library
load = (path_to_file) ->
  (require path_to_file).do_something()

# in my app (using the ''compiled'' libary)
cool_library.load("file_that_exists_in_my_app")

Hago esto:

# in my library
load = (module) ->
  module.do_something()

# in my app (using the ''compiled'' libary)
module = require("file_that_exists_in_my_app")
cool_library.load(module)

El primer código funcionó en require.js pero no en el paquete web.

En retrospectiva, creo que está bastante mal tener archivos de carga de una biblioteca de terceros en tiempo de ejecución de todos modos.

Answer 2

Hay un concepto llamado context ( http://webpack.github.io/docs/context.html ), que permite hacer las necesidades dinámicas.

También existe la posibilidad de definir puntos de división de código: http://webpack.github.io/docs/code-splitting.html

function loadInContext(filename) { 
    return new Promise(function(resolve){
        require([''./''+filename], resolve);
    })
}

function loadModules(namesInContext){
    return Promise.all(namesInContext.map(loadInContext));
}

Y úsalo como sigue:

loadModules(arrayOfFiles).then(function(){
    modules.forEach(function(module){
        module(moduleAPI);
    })
});

Pero probablemente no sea lo que necesita, tendrá muchos trozos en lugar de un paquete con todos los módulos requeridos, y probablemente no sea óptimo.

Es mejor definir el módulo que necesita en su archivo de configuración e incluirlo en su compilación:

// modulesConfig.js
module.exports = [
   require(...),
   ....
]

// run.js
require(''modulesConfig'').forEach(function(module){
    module(moduleAPI);
})

Answer 3

También puede intentar usar una biblioteca como esta: https://github.com/Venryx/webpack-runtime-require

Descargo de responsabilidad: soy su desarrollador. Lo escribí porque también estaba frustrado por la imposibilidad de acceder libremente a los contenidos del módulo en tiempo de ejecución. (en mi caso, para probar desde la consola)