JS模块的艺术

最新推荐文章于 2020-11-26 10:41:04 发布

tangding12

最新推荐文章于 2020-11-26 10:41:04 发布

阅读量124

点赞数

分类专栏： javascript 前端知识总结文章标签： es6 module javascript 前端知识总结

本文链接：https://blog.csdn.net/tangding12/article/details/103341563

版权

本文详细介绍了ES6的模块语法，包括export和import的基本用法，as和*的语法特性，以及模块组织形式的扩展，如单文件双模式导出和多文件索引。通过实例解析了模块导出和导入的编译过程，帮助读者掌握模块化编程的关键知识点。

摘要由CSDN通过智能技术生成

ES6的module导出引入总结。

基本module语法

ES6提供了export和import语法，给予了JS模块化代码组织形式的能力。export语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过import语句使用它们。

export

我们假设我们拥有一个fileA.js的文件，它向外export了这些：

// fileA.js
export const DEMO_VALUE = '123';
export function demoFunction(param) {
    console.log(param); }
export default 123

export有两种导出形式。一种是使用export语句接上const/let/var/function等声明变量函数的语句向模块外导出值。一个文件内部可以存在多个export语句。另一种是使用export default直接加上值（不接声明语句）的方式向模块外导出值。一个文件内部只能存在一个export default语句。

我们用babel来看一下实际上export实际转化成了什么。

// export const DEMO_VALUE = '123';
// export default 123
// babel transform
Object.defineProperty(exports, "__esModule", {
   
  value: true
});
exports.default = exports.DEMO_VALUE = void 0;
var DEMO_VALUE = '123';
exports.DEMO_VALUE = DEMO_VALUE;
var _default = 123;
exports.