📌  相关文章
📜  如何导出模块中的单个值或元素?

📅  最后修改于: 2022-05-13 01:56:36.557000             🧑  作者: Mango

如何导出模块中的单个值或元素?

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

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

export default element;

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

项目结构:它将如下所示。

代码项目结构

在这里,在“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"
}


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;


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


第 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