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

导入别名

可以为导入的模块重新命名 下面为 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-模块化开发（二）导入导出