JavaScript 导入导出教程与示例

我很高兴今天有机会与您分享 JavaScript 导入和导出语句。import 语句用于导入由另一个 JavaScript 文件导出的绑定。

代码可管理性是 Web 开发中最重要的因素。如果您正在构建具有大型代码库的应用程序，则管理该代码库并不容易。

通常，您必须滚动浏览数百甚至数千行代码，这使得调试过程非常困难。

怎么样？我们将一项任务分配给一个功能，并将其中一些功能保存在一个文件（组件）中。

幸运的是，JavaScript 以导入和导出语句的形式解决了这个问题。

JavaScript 中的模块是一小段代码，是一段可重用的代码，用于创建 JavaScript 应用程序。同样，您可以在一个文件中编写一些函数，并且 JavaScript 导入允许您通过该模块文件与各种其他 JavaScript 文件共享所有函数。

目录

1. JavaScript 中的导入语法
2. JavaScript 导入示例
3. 在 JavaScript 中导入多个模块
4. JavaScript 导入导出模块作为别名
5. JavaScript 中的动态导入
6. JavaScript 导入默认值
7. JavaScript 导入 *
8. 结论

JavaScript 中的导入语法

以下是在 JavaScript 中导入文件的语法。如下所示，导入语法基于单个或多个文件要求的导入条件。

import defaultExport from "module-name";
import * as name from "module-name";
import { data1 } from "module-name";
import { data1 as alias1 } from "module-name";
import { data1 , data2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { data1 , data2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

打字稿

复制

defaultExport– 这是一个引用模块中默认导出语句的名称。

name– 名称值是模块对象的名称，被描述为用作一种命名空间来引用导入。

module-name– 这是模块必须从中导入的模块。

dataN– 这是必须导入的导出的名称。

aliasN– 属于 Javascript 中命名导入的名称。

JavaScript 导入示例

我想首先创建一个js-imports-example项目目录，并在其中为 JavaScript 导入和导出语句示例生成三个文件。

• app.js
• run.js
• data-module.js

接下来，运行命令在项目文件夹中生成package.json文件。

npm init -y

重击

复制

接下来，安装babel-register和 babel-preset-env 插件作为开发依赖项。这些插件在我们的 node.js 项目中添加了导入和导出支持。

npm install --save-dev babel-register babel-preset-env

重击

复制

上面的命令创建node_modules文件夹并在其中安装两个插件。

接下来，打开run.js文件并在其中添加以下代码。

// run.js
require('babel-register')({
    presets: ['env']
});
module.exports = require('./app.js')

JavaScript

复制

require 钩子有助于将自身绑定到节点的 require 语句并自动动态编译文件。

在下一步中，我们将创建一个 JavaScript 模块文件并在data-module.js文件中添加一些数据。

// Data-module.js
export const calculateCircumference = ((radius) =>  {
    return 2 * Math.PI * radius;
})

JavaScript

复制

在这里，我们定义了使用Math.PI方法计算圆的周长的小函数。

我们使用 export const 语句初始化了这个模块。通过这样做，我们可以轻松地在整个 JavaScript 应用程序中导出这个类。这个小函数可用于获取圆的半径并将数值作为参数。

如果你注意到了，我们已经使用es6 语法在data-module.js文件中创建了es6 模块。

现在，让我们在app.js文件中添加数据，并学习如何在 JavaScript 中从另一个文件中导入变量。

// app.js
import { calculateCircumference } from './data-module';
console.log(calculateCircumference(2))

JavaScript

复制

我们从特定模块导入数据模块文件和特定的 calculateCircumference() 方法。

让我们运行以下命令来运行代码并检查导入和导出功能的结果。

node run.js

重击

复制

# Output
12.566370614359172

重击

复制

在 JavaScript 中导入多个模块

到目前为止，我们已经学习了如何导入单个模块，现在我们将看看如何在 JavaScript 中导出多个模块，然后导入多个模块。

转到data-module.js文件并在特定文件中定义其他模块。

// Data-module.js
export const calculateCircumference = ((radius) =>  {
    return 2 * Math.PI * radius;
})
export const toCelsius = ((f) => {
    return (5/9) * (f-32);
})

JavaScript

复制

我们创建了另一个将华氏温度转换为摄氏温度的函数。

接下来，导入app.js文件中的两个模块，如下所示。

// app.js
import { calculateCircumference, toCelsius } from './data-module';
console.log(calculateCircumference(2))
console.log(toCelsius(77))

JavaScript

复制

然后，从终端运行`node run.js`命令以获取上述导入的结果。

# node run.js
12.566370614359172
25

重击

复制

JavaScript 导入导出模块作为别名

JavaScript 允许我们重命名导出，特别是当我们从另一个文件导入它时。例如，我们将tc别名赋予toCelsius模块。

// app.js
import { toCelsius as tc } from './data-module';
console.log(tc(77))
// Result => 25

JavaScript

复制

如您所见，我们将toCelsius转换为tc，它工作得非常好。

JavaScript 动态导入

动态导入在您需要有条件地按需加载模块的情况下很有用。静态形式有利于初始加载依赖项。

import('/modules/module-file.js')
  .then((module) => {
    // module response.
});

打字稿

复制

可以调用import关键字作为动态导入模块的方法。如上所示使用时，它会返回一个 Promise。

动态导入也支持 ES await关键字。

const module = await import('/modules/module-file.js');

打字稿

复制

在 JavaScript 中导入默认值

假设我们在data-module.js文件中只有一个可用的导出默认函数或模块。

// data-module.js
const calculateCircumference = ((radius) =>  {
    return 2 * Math.PI * radius;
})
export default calculateCircumference;

JavaScript

复制

在给定的代码中，我们定义了export default 关键字，这意味着我们正在从data-module.js文件中导出calculateCircumference函数。

现在，导入默认值有待完成，我们在data-module.js文件中获得了单个默认模块。它可以导入到主app.js文件中，如下所示。

// app.js
import calculateCircumference from './data-module';
console.log(calculateCircumference(2))
// Result => 12.566370614359172

JavaScript

复制

JavaScript 导入 *

通常，我们在花括号 import {...} 中创建要导入的内容列表，如下所示：

打开data-module.j文件，在其中添加以下代码。

// data-module.js
const calculateCircumference = ((radius) =>  {
    return 2 * Math.PI * radius;
})
const toCelsius = ((f) => {
    return (5/9) * (f-32);
})
export {calculateCircumference, toCelsius};

JavaScript

复制

我们正在从 data-module 文件中导出两个模块，现在我们将学习在app.js文件中导入这两个模块。

打开app.js文件并在其中包含以下代码。

// app.js
import * as math from './data-module';
math.calculateCircumference(2)
math.toCelsius(77)

JavaScript

复制

在 JavaScript 中使用import *可以让我们一次导入所有模块。

查看上述代码的输出。

# node run.js
12.566370614359172
25

重击

复制

结论

在本教程中，我们学习了以下类型的导入和导出。

进口：

从模块命名的导出：
import {x [as y], ...} from “module”

默认导出：
import x from “module”
import {default as x} from “module”

一切：
import * as obj from “module”
导入模块，但不要将其分配给变量：
import “module”

出口

在声明类/函数/…之前：
export [default] 类/函数/变量…

独立导出：
export {x [as y], ...}。

重新导出：
export {x [as y], ...} from “module”
export * from “module”（默认不重新导出）。
从“模块”导出 {default [as y]}（重新导出默认值）。

所以在本教程中，我们学习了如何使用 JavaScript 导出语句、导入语句、动态模块导入、JavaScript 导入 * 和导入默认值。

我们试图阐明几乎所有主题。但是，您愿意了解更多关于 JavaScript 导入语句的信息，然后访问MDN。

最后，我们通过示例完成了 JavaScript 导入和导出教程。