JavaScript 如何从模块中导出单个值或元素

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

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

export default element;

注意： 此语法仅用于从模块中导出单个值，如果使用默认导出，则无法导出其他值，因为每个模块只能使用一个默认导出。

项目结构： 将会如下所示。

在“GFG-MODULES”的根文件夹中，有3个文件，分别是“index.html”，“index.js”和我们的“package.json”文件，还有一个名为“siteData.js”的文件夹“modules”。

代码示例:

步骤1： 配置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

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

步骤3： 导入单一元素在index.js. 这里我们导入了从模块“siteData.js”导出的单一值。

JavaScript

import siteName from "./modules/siteData.js"; 
  
console.log(siteName); 

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

node index.js

输出:

GeeksForGeeks