JavaScript-模块化开发（三）使用别名

最新推荐文章于 2024-12-26 16:37:32 发布

w_向北

最新推荐文章于 2024-12-26 16:37:32 发布

阅读量1.5k

点赞数

分类专栏： JavaScript-模块化开发文章标签： javascript 前端 webpack

本文链接：https://blog.csdn.net/qq_40754757/article/details/127246805

版权

JavaScript-模块化开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在JavaScript模块化开发中使用别名简化导入过程，并避免命名冲突。通过具体示例展示了如何为导出项定义别名及如何在导入时使用这些别名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导入别名

可以为导入的模块重新命名下面为 test.js 模块内容

有些导出的模块命名过长起别名可以更加简洁
本模块与导入模块重名时可以通过起别名防止错误

export const name= "xb";
export const testFunc = function() {
  return "is a module function";
};
export class User {
  show() {
    console.log("user.show");
  }
}

模块导入使用 as 对接口重命名本模块中已经存在 name 变量需要对导入的模块重命名防止重名错误

<script type="module">
  import { User as user, testFunc as tFunc, name as pname } from "./test.js";
  let name = "xb";
  console.log(name);
  console.log(user);
  console.log(tFunc);
</script>

导出别名

模块可以对导出给外部的功能起别名下面是 test.js 模块对导出给外部的模块功能起了别名

const name= "xb";
const testFunc = function() {
  return "is a module function";
};
class User {
  show() {
    console.log("user.show");
  }
}
export { name, testFunc as tFunc, User as user };

这时就要使用新的别名导入了

<script type="module">
  import { user, tFunc } from "./test.js";
  tFunc();
</script>

模块化知识其它文章直达

JavaScript-模块化开发（一）基础知识
 JavaScript-模块化开发（二）导入导出