如何在 VSCode 中配置具有多个文件的仅 javascript 启动项目

Question

我正在学习 FCC 的 javascript 课程，并使用 VSCode 作为我的代码编辑器。但到目前为止，我所有的 js 代码都包含在一个文件中。显然，对于任何有意义的 js 开发，我需要创建一个 js 文件的集合，这些文件作为一个单元工作。

为了开始探索这个，我有一个非常简单的两个 js 文件设置，test-01.js 和 test-02.js，其中 test-01.js 包含对函数的调用这是在 test-02.js 中定义的。我首先想在没有任何 HTML 或 CSS 文件的情况下执行此操作。尽管这也将是未来的要求。

第一个文件测试-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);

考虑到未来项目的复杂性，第二个文件 test-02.js 位于第一个文件的子文件夹中。 .\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";
};

我尝试将函数 Display() 从 test-01.js 导入到 test-02.js 中，但没有成功。

我尝试寻找修改文件的方法，但没有成功：

package.json
jsconfig.json
setting.json
launch.json

我尝试在 github 和其他地方寻找示例项目，但没有成功。

我在 Whosebug 中寻找答案没有成功。

一切都无济于事。这应该很简单，应该在 vscode 文档中进行描述，但我在那里找不到。到目前为止，我已经尝试了很多东西，以至于我可能搞砸了我的开发环境。我希望有人能帮助我并指出正确的方向来解决这个问题。

非常感谢，托马斯。

Answer 1

JavaScript 模块是从一个 .js 文件导入方法并在另一个 .js 文件中调用它们的方法。在 JavaScript 中有许多不同的导入和使用模块的方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

以下是您的情况的示例：

首先，让我们将 JavaScript 主文件导入 html 文档：

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

接下来，让我们在folder-02/test-02.js:

中定义'Display'函数

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

最后，让我们设置 test-01.js 来导入和调用之前定义的函数：

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);

如何在 VSCode 中配置具有多个文件的仅 javascript 启动项目

How to configure a start up javascript-only project with multiple files in VSCode

javascript

configuration

visual-studio-code