ES12 模块导入导出详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，模块化已经成为了必不可少的一部分。而 ES6 的模块化已经为我们提供了很好的解决方案。但是随着 ES12 的发布，模块化的使用也更加便捷和灵活。本文将详细介绍 ES12 模块导入导出的使用，以及一些实用的技巧和注意事项。

模块导出

ES12 支持多种方式的模块导出。下面是一些常见的方式：

export default function() {
  console.log('Hello, World!');
}

上面的代码中，我们使用 export default 导出了一个默认的函数。这个函数可以被其他模块使用，并且不需要使用花括号包裹。

export const name = 'Tom';
export const age = 20;

上面的代码中，我们使用 export 导出了两个具名的常量。这些常量可以被其他模块使用，并且需要使用花括号包裹。

const name = 'Tom';
const age = 20;

export { name, age };

上面的代码中，我们使用 export 导出了两个变量。这些变量可以被其他模块使用，并且需要使用花括号包裹。

const name = 'Tom';
const age = 20;

export { name as myName, age };

上面的代码中，我们使用 export 导出了两个变量。其中，我们将 name 重命名为了 myName。这些变量可以被其他模块使用，并且需要使用花括号包裹。

const name = 'Tom';
const age = 20;

export * from './utils.js';

上面的代码中，我们使用 export * 导出了 ./utils.js 中的所有变量和函数。这些变量和函数可以被其他模块使用，并且需要使用花括号包裹。

ES12 同样支持多种方式的模块导入。下面是一些常见的方式：

import myFunc from './utils.js';

myFunc();

上面的代码中，我们使用 import 导入了 ./utils.js 中的默认函数。我们将这个函数命名为了 myFunc，并且可以直接使用。

import { name, age } from './utils.js';

console.log(name);
console.log(age);

上面的代码中，我们使用 import 导入了 ./utils.js 中的两个常量。我们需要使用花括号包裹，并且可以直接使用。

import * as utils from './utils.js';

console.log(utils.name);
console.log(utils.age);
utils.myFunc();

上面的代码中，我们使用 import * 导入了 ./utils.js 中的所有变量和函数。我们使用 utils. 来访问这些变量和函数。

ES12 支持动态导入，可以在运行时根据需要导入模块。例如：

async function loadModule(modulePath) {
  const myModule = await import(modulePath);
  myModule.myFunc();
}

loadModule('./utils.js');

上面的代码中，我们使用 import 动态导入了一个模块，然后可以直接使用其中的函数。注意，动态导入返回的是一个 Promise 对象，需要使用 await 进行等待。

有时候我们导入的变量名和当前模块中已有的变量名冲突了，我们可以使用 as 进行重命名：

import { name as myName } from './utils.js';

console.log(myName);

上面的代码中，我们使用 as 将 name 重命名为了 myName，避免了变量名冲突。

有时候我们需要同时导入默认值和具名值，可以这样做：

import myFunc, { name, age } from './utils.js';

上面的代码中，我们同时导入了默认函数和两个具名常量。

有时候我们需要导出的变量名和当前模块中的变量名冲突了，我们也可以使用 as 进行重命名：

const myName = 'Tom';
export { myName as name };

上面的代码中，我们使用 as 将 myName 重命名为了 name，避免了变量名冲突。

ES12 模块导入导出提供了更加便捷和灵活的方式来管理模块化。我们可以使用多种方式来导出变量和函数，也可以使用多种方式来导入这些变量和函数。同时，还有一些实用的技巧可以帮助我们更好地使用这些功能。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65823bf2d2f5e1655dd63d87