如何在模块中导出多个值或元素？

JavaScript 中的模块包含一些数据或函数，可以通过调用它们在任何地方重用。在创建这些模块时使用 export 语句，以便可以在代码的任何其他部分中导入相同的模块以使用这些数据并重复执行某些任务（由函数执行）。

语法：以下语法用于从模块中导出多个值或元素：

export let element1
export const someValue
export function foo(){...}

注意：由于我们要导出多个值，因此在导入这些值时，必须使用相应对象的相同名称

项目结构：

代码项目结构

在这里，在“GFG-MODULES”的根文件夹中，有3个文件，分别是“index.html”、“index.js”和我们的“package.json”文件以及这些文件，它的“modules”文件夹中包含一个文件命名为“siteData.js”。

例子：

第一步：配置package.json文件，使其在使用export语句时不会出错

首先在我们的 package.json 文件中，添加以下属性：

"type" : "module"

当你有“type:module”属性时，你的源代码就可以使用import语法，否则会报错，只支持“require”语法。您的 package.json 文件应该与此类似

Javascript

{
  "name": "gfg-modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "GFG",
  "license": "ISC"
}

第 2 步：从模块中导出多个元素。在siteData.js 中，我们从模块“siteName”中导出了多个元素。

Javascript

export const siteName = "GeeksForGeeks";
export const url = "https://www.geeksforgeeks.org/";
export const founderName = "Sandeep Jain";
export const aboutSite = "A Computer Science portal for geeks";
export let siteContent =
  "Computer science and Programming articles along with Courses";

第 3 步：在index.js中导入多个元素：

index.js

import {
  siteName,
  url,
  founderName,
  aboutSite,
  siteContent,
} from "./modules/siteData.js";
  
console.log("Site Data is as follows:");
console.log(`Site name: \t${siteName}`);
console.log(`Site url : \t${url}`);
console.log(`Founder name: \t${founderName}`);
console.log(`About site: \t${aboutSite}`);
console.log(`Site Content: \t${siteContent}`);

在这里，由于我们导出了多个值，因此我们的导出类型是“命名导出”，因此，我们以相同的对应名称导入了所有值。

运行应用程序的步骤：打开终端并键入以下命令。

node index.js

输出：

Site Data is as follows:
Site name:      GeeksForGeeks
Site url :      https://www.geeksforgeeks.org/
Founder name:   Sandeep Jain
About site:     A Computer Science portal for geeks
Site Content:   Computer science and Programming articles along with Courses

因此，我们已经了解了如何从模块中导出多个元素。