Soy un completo principiante en JavaScript y desarrollo web. La mayor parte de mi experiencia en programación proviene de Python, por lo que me siento muy cómodo con la forma en que los archivos de Python se pueden organizar en diferentes carpetas como módulos y pueden desempeñar una especie de función plug and play. Hasta ahora no puedo descubrir esa flexibilidad en JS.
Aquí está la estructura de mi proyecto actual:
-root |-index.html |-app.js |-modules |-test.js Aquí está mi index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Project</title> </head> <body> <script src="app.js"></script> </body> </html> Mi app.js :
let hello = Hello() Finalmente mis modules/test.js :
class Hello(){ constructor(){ console.log('Hello World'); } } Cuando lo ejecuto, aparece el mensaje de error: Error de Uncaught ReferenceError: Hello is not defined at app.js:1:1
¿Qué hago para lograr los resultados deseados? Saludos.
Has probado:
módulos/prueba.js:
export class Hello(){ constructor(){ console.log('Hello World'); } }aplicación.js:
import { Hello } from './modules' let hello = new Hello()O, si usa el valor predeterminado de exportación, no necesita las llaves, ya que no necesita especificar lo que está exportando. Al igual que:
módulos/prueba.js:
export default class Hello(){ constructor(){ console.log('Hello World'); } }aplicación.js:
import Hello from './modules' let hello = new Hello()En primer lugar, en su index.html, cuando esté trabajando con módulos, debe agregar el tipo de script
<script type="module"></script>En los módulos, después de hacer algo de código y lógica, exporta su clase con la declaración de exportación al final, así:
export default Hello;en tu app.js, cuando quieras usar algún módulo, lo importas así:
import Hello from "./modules/test.js";Y luego podrá utilizar los datos importados. Puede utilizar tantas importaciones como desee. Aquí hay un ejemplo de trabajo con los ajustes menores en su código: Demostración de CodeSanbox
Entonces, las respuestas proporcionadas por rustyBucketBay y Yavor son correctas pero incompletas. La solución de trabajo es hacer lo que cada uno de los dos sugirió pero juntos. Esto es lo que finalmente funciona:
index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Project</title> </head> <body> <script type="module" src="app.js"></script> </body> </html> modules/test.js :
export default class Hello{ constructor(){ console.log('Hello World'); } } app.js :
import Hello from 'modules/test.js' let hello = new Hello()