Establecer la ruta de acceso pública de tiempo de ejecución para la carga en fragmentos de trabajador web.

Tengo una biblioteca de webpack que contiene un webworker (importado a través del manipulador ‘magic’ worker) y estoy tratando de ejecutar esta biblioteca desde otro proyecto (en este caso, un proyecto de angular).

He copiado correctamente los archivos del webworker (y la parte del webworker) en la salida de mi proyecto de angular, ya que el webworker se ejecutará correctamente si ejecuto mi proyecto de angular en el mismo dominio desde el que está alojado.

Este es el código utilizado para ejecutar el webworker (y, a su vez, agregarlo a webpack):

var worker = new Worker(new URL('../worker/worker.ts', import.meta.url));

Y he reemplazado el webworker predeterminado por un stub que maneja la recuperación de fallos en dominios cruzados.

Mi problema es que mi proyecto normalmente no se ejecuta en el mismo contexto de dominio y, en su lugar, se ejecuta en dominios separados. Puedo establecer la variable __webpack_public_path__ en el código que no es del webworker para que la URL del web worker se resuelva correctamente, sin embargo, el webworker solo carga un stub de carga de fragmentos que tiene la ruta pública incrustada (si se establece) desde la configuración de webpack, pero sin medios para modificarlo en tiempo de ejecución.

Mi pregunta es: ¿existe alguna forma de editar ese stub de carga de fragmentos para tener una ruta pública diferente en tiempo de ejecución, o existe alguna forma de modificar cómo interactúa la biblioteca con el empaquetador de angular para que el valor utilizado para deploypath se copie en las bibliotecas de js de los webworkers que se copian (a través de los activos adicionales en angular.json)?

davy.ai

July 14, 2023 at 11:59 pm

Como experto en TI especializado en webpack, web-worker y webpack-splitchunks, recomendaría las siguientes soluciones para el problema mencionado:

Puedes intentar utilizar el constructor del Worker pasando la URL completa del script del worker en lugar de utilizar el controlador mágico. Esto garantizará que el web worker se cree en el contexto correcto del mismo dominio.

var worker = new Worker('https://your-worker-url/worker.js');

Otra solución podría ser establecer la opción publicPath de la configuración de webpack a una URL absoluta que pueda ser accedida desde ambos dominios. Esto garantizará que la URL correcta sea utilizada por el stub de carga de fragmentos al cargar los scripts del worker.

output: {
  publicPath: 'https://your-domain.com/webpack-assets/'
}

Si deseas establecer dinámicamente la ruta de acceso público del stub de carga de fragmentos en tiempo de ejecución, puedes utilizar la variable global __webpack_public_path__ proporcionada por webpack. Esta variable puede ser establecida antes de cargar cualquier fragmento o script y puede ser cambiada en tiempo de ejecución.

__webpack_public_path__ = 'https://your-domain.com/webpack-assets/';

// Carga tu worker u otros scripts aquí

Por último, si deseas copiar el valor de deploypath desde el angular.json a las bibliotecas del worker js que se están copiando, puedes utilizar el copy-webpack-plugin para copiar los activos y establecer la ruta de salida adecuada.

// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/worker/*', to: 'worker/', globOptions: { dot: true } },
      { from: 'angular.json', to: 'assets/', flatten: true }
    ],
  }),
]

Esto copiará los scripts del worker y el archivo angular.json a la carpeta de activos en el directorio de salida. Luego puedes leer el valor de deploypath del archivo angular.json en tus scripts del worker y utilizarlo según corresponda.

Espero que estas soluciones ayuden a resolver tu problema. Avísame si tienes alguna pregunta o necesitas más ayuda.

Answer

davy.ai

July 14, 2023 at 11:59 pm
Como experto en TI especializado en webpack, web-worker y webpack-splitchunks, recomendaría las siguientes soluciones para el problema mencionado:
1. Puedes intentar utilizar el constructor del Worker pasando la URL completa del script del worker en lugar de utilizar el controlador mágico. Esto garantizará que el web worker se cree en el contexto correcto del mismo dominio.
```
var worker = new Worker('https://your-worker-url/worker.js');
```
1. Otra solución podría ser establecer la opción publicPath de la configuración de webpack a una URL absoluta que pueda ser accedida desde ambos dominios. Esto garantizará que la URL correcta sea utilizada por el stub de carga de fragmentos al cargar los scripts del worker.
```
output: {
  publicPath: 'https://your-domain.com/webpack-assets/'
}
```
1. Si deseas establecer dinámicamente la ruta de acceso público del stub de carga de fragmentos en tiempo de ejecución, puedes utilizar la variable global __webpack_public_path__ proporcionada por webpack. Esta variable puede ser establecida antes de cargar cualquier fragmento o script y puede ser cambiada en tiempo de ejecución.
```
__webpack_public_path__ = 'https://your-domain.com/webpack-assets/';

// Carga tu worker u otros scripts aquí
```
1. Por último, si deseas copiar el valor de deploypath desde el angular.json a las bibliotecas del worker js que se están copiando, puedes utilizar el copy-webpack-plugin para copiar los activos y establecer la ruta de salida adecuada.
```
// webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/worker/*', to: 'worker/', globOptions: { dot: true } },
      { from: 'angular.json', to: 'assets/', flatten: true }
    ],
  }),
]
```
Esto copiará los scripts del worker y el archivo angular.json a la carpeta de activos en el directorio de salida. Luego puedes leer el valor de deploypath del archivo angular.json en tus scripts del worker y utilizarlo según corresponda.

Espero que estas soluciones ayuden a resolver tu problema. Avísame si tienes alguna pregunta o necesitas más ayuda.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Establecer la ruta de acceso pública de tiempo de ejecución para la carga en fragmentos de trabajador web.

Answer

davy.ai