No sé si es el comportamiento previsto o hay algún problema con mi configuración. Por lo que sé:
@babel/preset-env incluye @babel/plugin-syntax-dynamic-import por defectopackage.module e importar el recurso correspondienteCon esta configuración:
{ "presets": [ "@babel/preset-typescript", ["@babel/preset-env", { "corejs": 3, "useBuiltIns": "usage", "bugfixes": true }] ], "plugins": [ ["@babel/plugin-transform-typescript", { "allowDeclareFields": true }], "@babel/plugin-proposal-class-properties" ] } Cuando import dinámicamente cualquier biblioteca, se importa el archivo incorrecto. Por ejemplo, con la biblioteca vanilla-lazyload , lo siguiente se define en package.json :
{ "name": "vanilla-lazyload", "main": "dist/lazyload.min.js", "module": "dist/lazyload.esm.js" }Importación con:
import('vanilla-lazyload').then(({ default: LazyLoad }) => { /* use */ }); .... dist/lazyload.min.js se empaquetará, y NO dist/lazyload.esm.js .
¿Cualquier pista?
Babel no interferirá con su importación dinámica. Aquí Webpack decide cómo resolver sus módulos importados.
Tiene un orden predeterminado de campos que busca según el campo de destino de las configuraciones de su paquete web. (consultehttps://webpack.js.org/configuration/resolve/#resolvemainfields ) El orden predeterminado es 'browser' , 'module' y luego 'main' y en su ejemplo vanilla-lazyload también tiene la propiedad "navegador" en su paquete.json ( https://github.com/verlok/vanilla-lazyload/blob/master/package.json#L7 )
{ "main": "dist/lazyload.min.js", "module": "dist/lazyload.esm.js", "browser": "dist/lazyload.min.js", }Puede anular el orden predeterminado de los paquetes web por
// webpack config module.exports = { //... resolve: { mainFields: ['module', 'browser', 'main'], }, }; Si no desea cambiar el orden que también se aplicará a otras importaciones, puede usar la ruta completa: import("vanilla-lazyload/dist/lazyload.esm.min.js") O puede agregarle un alias en su configuración del paquete web:
const { resolve } = require("path"); module.exports = { resolve: { alias: { "vanilla-lazyload": resolve("node_modules/vanilla-lazyload/dist/lazyload.esm.min.js"), }, }, }Pero tal vez si los autores de vanilla-lazyload decidieron tener el .min.js para el navegador env, entonces tal vez debería consultar con ellos si el paquete esm también es bueno para usar. Por ejemplo, parece que no se ha minimizado (he abierto un PR para eso). y no se transpila. debe asegurarse de que funcionará con su entorno de configuración/ejecución.