¿Cómo puedo importar un archivo externo ( config.js ) desde un paquete webpack?
Tengo la siguiente estructura de archivos para el desarrollador local:
/dist/ /index.html /plugin.js /src/ /index.ts /config.js # This config is only for local dev, will be different in prod / ... El plugin.js será trasladado y ejecutado por un sitio web de terceros. Quiero importar config.js (que en producción será proporcionado por el sitio web de terceros) dentro de mi plugin.js .
config.js en index.ts así:
import config from "../config.js"; Logré excluir config.js de plugin.js especificándolo en el campo externals en webpack.config.js que funciona hasta ahora:
module.exports = { ... externals: [ "../config.js" ] } Sin embargo, cuando abro index.html , la declaración de import de ../config.js no recibe un error, pero el archivo config -object no está undefined .
La estructura de archivos del servidor de terceros en prod se ve así:
/ ... / /plugins/ /other-plugin/... # A bunch of other plugins. Each has its own folder in plugins /my-plugin/ plugin.js # This is my plugin /config.js # This is the global config file of the server for all pluginsíndice.ts :
import config from "../config.js"; console.log(config);config.js :
module.exports = { foo: "bar" }Los elementos externals implican que todo lo que se exportó mediante el archivo config.js estaría disponible en tiempo de ejecución. Entonces, para el navegador, eso significa que probablemente ya lo haya inyectado a través de una etiqueta de secuencia de script o para Node.js, ya se importó a través globalThis o algún equivalente. Su línea de import config from "../config.js"; simplemente desaparece cuando se empaqueta el código. Lo external no significa que volvería a importar config.js cuando se ejecuta el código. Además, la práctica general es usar una configuración de objeto externo en lugar de una configuración de matriz como:
module.exports = { // ... externals: { "../config.js": "AppConfig" } }; Esto le dice a Webpack que todo lo que exportó el archivo config.js debería estar disponible como objeto AppConfig en tiempo de ejecución. El uso de sintaxis de matriz está destinado a código con efectos secundarios.
Ahora volviendo a la posible solución. La opción recomendada es utilizar variables de entorno para pasar los valores específicos del entorno. Suponiendo que su complemento es una biblioteca, cuando se consume y se empaqueta como parte de la aplicación a través de Webpack, puede utilizar DefinePlugin para inyectar estos valores en su código. Luego puede acceder a ellos en su código como process.env.foo . No debe importar config.js en su código en ninguna parte.
La segunda opción es usar elementos externos con la configuración de objetos como se muestra arriba. Cambie su archivo config.js a UMD o equivalente:
// config.js file const config = { foo: "bar" }; // Make it available globally window.AppConfig = config; // Since `module` is not available in browser. if (module && module.exports) { module.exports = config; } Y finalmente, importe su config.js en el archivo index.html antes de que se cargue el script incluido.
<head> <script src="/path/to/config.js>"></script> <script src="/path/to/bundle.js>"></script> </head>