Jak nakonfigurovat spuštění javascript-pouze projekt s více soubory v VSCode

0

Otázka

Dělám javascript, samozřejmě s FCC a použití VSCode jako můj editor kódu. Ale k dnešnímu dni, celý můj js kód byl obsažen v jediném souboru. Samozřejmě pro nějaké smysluplné js rozvoje potřebuji vytvořit kolekci js soubory, které pracují jako jeden celek.

Začít poznávat to mám velmi jednoduché nastavení dva js soubory, test-01.js a test-02.js, kde test-01.js obsahuje volání funkce, která je definována v test-02.js. Nejprve chci dělat to bez jakéhokoliv HTML nebo CSS soubory. I když to bude také budoucí požadavky.

První soubor 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);

S budoucí složitost projektu v mysli, druhý soubor test-02.js je v sub-složky z prvního souboru. .\folder-02\test-02.js:

//test-02.js
function Display(param = 0) {

    console.log("This is the program called with parameter: ", param);

    return "Back from Display";
};

Jsem neúspěšně zkoušel import funkce Display() z test-01.js do test-02.js.

Jsem neúspěšně zkoušel najít způsoby, jak upravit soubory, jako je:

  • balíček.json
  • jsconfig.json
  • nastavení.json
  • spuštění.json

Jsem neúspěšně hledal vzorku projektů na github a jinde.

Jsem neúspěšně hledal odpovědi na StackOverflow.

To vše k ničemu. To by mělo být ne přemýšlet, které měly být popsány v vscode dokumentace, ale nemůžu to najít. Teď jsem se snažil tolik věcí, které jsem asi podělal vývojové prostředí. Doufám, že mi někdo může pomoci a nasměrovat správným směrem k vyřešení tohoto.

Mnohokrát děkuji, Thomasi.

1

Nejlepší odpověď

0

JavaScript moduly jsou způsob, jak jít při importu metody z jednoho .js souborů a volat je v jiném .js souboru. Existuje mnoho různých způsobů, jak import a použití modulů v Javascriptu: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Zde je příklad pro vaši situaci:

První, umožňuje importovat hlavní JavaScript soubor do html dokumentu:

<head>
    <!-- type="module" is necessary -->
    <script type='module' src="test-01.js" defer></script>
</head>

Dále umožňuje definovat "Display" funkce v 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 file

A konečně, umožňuje nastavit test-01.js importovat a volat dříve definované funkce:

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);
2021-11-20 18:46:21

To je nesmírně užitečné! Minul jsem vývozní prohlášení v test-02.js. Díky Nikola reagovat tak rychle! O fragment kódu HTML, a co když nemám HTML soubor? Můžu jen ignorovat první fragment kódu? Teď jen chci, aby nás js soubory a ne HTML, pokud je to možné.
Thomas

Ano, je to možné. Můžete jej spustit pomocí uzlu (musí být nainstalován nodejs.org/en) První, run "npm init -y" v terminálu. Další, přidejte si to do vašeho balíčku.json souboru: "typ":"modul". Konečně, spusťte "uzel test-01.js" v terminálu, který vypíše správný výsledek.
Nikola Lukic

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................