Estoy haciendo un curso de javascript con FCC y uso VSCode como mi editor de código. Pero hasta la fecha, todo mi código js estaba contenido en un solo archivo. Obviamente, para cualquier desarrollo js significativo, necesito crear una colección de archivos js que funcionen como una sola unidad.
Para comenzar a explorar esto, tengo una configuración muy simple de dos archivos js, test-01.js y test-02.js, donde test-01.js contiene una llamada a una función que se define en test-02.js. Primero quiero hacer esto sin ningún archivo HTML o CSS. Aunque eso también será un requisito futuro.
El primer archivo test-01.js:
//test-01.js let returnStr = ""; console.log("This is the calling program"); // Now call the function in test-02.js returnStr = Display(10);Teniendo en cuenta la complejidad del proyecto futuro, el segundo archivo test-02.js se encuentra en una subcarpeta del primer archivo. .\carpeta-02\prueba-02.js:
//test-02.js function Display(param = 0) { console.log("This is the program called with parameter: ", param); return "Back from Display"; };Intenté sin éxito importar la función Display() de test-01.js a test-02.js.
He intentado sin éxito encontrar formas de modificar archivos como:
Intenté sin éxito buscar proyectos de muestra en github y en otros lugares.
He buscado sin éxito respuestas en StackOverflow.
Todo fue en vano. Esto debería ser una obviedad que debería haberse descrito en la documentación de vscode, pero no puedo encontrarlo allí. A estas alturas he probado tantas cosas que probablemente he estropeado mi entorno de desarrollo. Espero que alguien pueda ayudarme y orientarme en la dirección correcta para resolver esto.
Muchas gracias, Tomás.
Los módulos de JavaScript son el camino a seguir al importar métodos de un archivo .js y llamarlos en otro archivo .js. Hay muchas formas diferentes de importar y usar módulos en JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Aquí hay un ejemplo para su situación:
Primero, importemos el archivo JavaScript principal al documento html:
<head> <!-- type="module" is necessary --> <script type='module' src="test-01.js" defer></script> </head>A continuación, definamos la función 'Mostrar' en folder-02/test-02.js :
function Display(param = 0) { console.log("This is the program called with parameter: ", param); return "Back from Display"; }; export default Display //exporting it to be imported into another js filePor último, configuremos test-01.js para importar y llamar a la función definida anteriormente:
import Display from './folder-02/test-02.js'; let returnStr = ""; console.log("This is the calling program"); // Now call the function in test-02.js returnStr = Display(10);