Me enfrento a un problema, el objetivo que quiero lograr es llamar a una función desde un archivo de paquete web.

He seguido esta pregunta y puedo hacerlo de la misma manera que la respuesta aceptada. Usando la etiqueta <script> en el HTML y window.onload . Pero quiero llamar a mi función desde un archivo .js .

Entonces quiero algo como esto:

1. El HTML llama a un archivo de script JS.
2. Función de importación de secuencias de comandos JS desde JS con paquete web.
3. Se ejecuta la función webpacked.

La carpeta del árbol es así:

 | |-> index.html |-> index.js --> From here I want to call function packed |-> lib | |-> main.js --> webpacked file

Mi webpack.config.js es

 module.exports = { // ... output: { filename: 'main.js', path: path.resolve(__dirname, 'lib'), libraryTarget: 'var', library: 'MyLibrary' }, };

El archivo que estoy empaquetando es un archivo TS que tiene una función como esta:

 export function test(){ console.log("test") }

Luego, en el HTML, llamo al archivo JS:

 <script type="module" src="./index.js"></script>

Y en index.js hago la import :

 import MyLibrary from './lib/main.js'; // here I want to do MyLibrary.test()

Pero arroja un error:

 Uncaught SyntaxError: import not found: default

También he probado:

 import {test} from './lib/main.js';

O agregar default en el archivo TS.

 export default function test(){ console.log("test") } // or function test() { ... } export {test as default};

Pero, como dije antes, agregar esto en el HTML funciona:

 <script src="./lib/main.js"></script> <script> window.onload = function () { MyLibrary.test(); }; </script>

Pero quiero tener la función en un archivo JS.

Encontré una pregunta similar pero la respuesta no me funciona.

Gracias por adelantado