Estoy probando una biblioteca que se exporta como un módulo (por Webpack) con algo como
// myLib.js const a = 1; export { a as myVal };Mi script para la página es
// index.js import { myVal } from 'my-lib' console.log (myVal) En webpack.config.js tengo externals: { myLib: 'myLib' } . En mi index.html , tendría
... <script type="module" src="https://unpkg.com/myLib"></script> <script type="module" src="index.js"></script> ... Esto conduce a un error de tiempo de ejecución de Uncaught TypeError: Failed to resolve module specifier "myLib". Relative references must start with either "/", "./", or "../".
Esto se debe a que, a pesar de que la biblioteca se cargó en la página, no se hace referencia a ella con el nombre myLib .
¿Cuál es la forma correcta de configurar Webpack para que cuando importe 'myLib' en index.js , sepa que me refiero a importar desde 'http://unpkg.com/myLib' ?
Una solución es importar todo el módulo y convertirlo en una variable global, como en index.html
... <script type="module"> import * as myLib from 'https://unpkg.com/myLib' window.myLib = myLib </script> <script type="module" src="index.js"></script> ...Otra solución parece ser generar módulos como salidas.
externals: { myLib: 'https://unpkg.com/myLib' } experiments: { outputModule: true }, Esto le da archivos .mjs . Verá la primera línea en el archivo de salida con algo como
import * as __WEBPACK_EXTERNAL_MODULE_https_unpkg_com_myLib_9592ca0f__ from "https://unpkg.com/myL"; Esto le permite continuar usando import { myVal } from 'myLib' en su código, mientras que el archivo compilado sustituye myLib por la URL.
Nota : esta configuración externals generará un error si no genera como módulos. El archivo generado tendrá la línea module.exports = https://unpkg.com/myLib , que no es una sintaxis JS válida. Si coloca `` alrededor de la URL, la sintaxis se vuelve válida, pero lo que debería ser su módulo es solo una cadena, es decir, module.export tiene un valor de cadena.
Nota : este enfoque aún no funciona bien con HttpWebpackPlugin , ya que las etiquetas de script inyectadas no agregan type="module" para los archivos de salida de su módulo. Deberá hacer esto manualmente especificando scriptLoading: 'module' (v5.5.0)
Resultados del paquete web 5.72.1