ES6/ES7/ES8/ES9 实践指南：JavaScript 多种模块化方案

随着 JavaScript 的发展，模块化的重要性越来越被人们所认可。ES6/ES7/ES8/ES9 带来了多种模块化方案，本文将介绍这些方案并提供实际示例。

CommonJS

CommonJS 是 Node.js 的模块化规范，它采用同步加载模块的方式。在 CommonJS 中，一个文件就是一个模块，每个模块都有自己的作用域。模块内部的变量和函数不会被其他模块访问，除非明确地导出。

导出模块

有两种方式可以导出模块：

1. module.exports：

   // 导出一个对象
   module.exports = {
     foo: 'hello',
     bar: function() {
       console.log('world');
     }
   };
   
   // 导出一个函数
   module.exports = function() {
     console.log('hello world');
   };

2. exports：

   // 导出一个对象
   exports.foo = 'hello';
   exports.bar = function() {
     console.log('world');
   };
   
   // 导出一个函数
   exports = function() {
     console.log('hello world');
   };

需要注意的是，如果使用了 exports，就不能直接给 exports 赋值，因为这样会切断 exports 和 module.exports 的关系，导致无法导出模块。

导入模块

使用 require 可以导入模块：

const myModule = require('./myModule');

ES6 模块化

ES6 模块化是 ES6 标准中的模块化规范，它采用异步加载模块的方式。在 ES6 模块化中，一个文件就是一个模块，每个模块都有自己的作用域。模块内部的变量和函数默认不会被其他模块访问，需要使用 export 明确地导出。

导出模块

有两种方式可以导出模块：

1. 命名导出

   // 导出一个对象
   export const obj = {
     foo: 'hello',
     bar: function() {
       console.log('world');
     }
   };
   
   // 导出一个函数
   export function foo() {
     console.log('hello world');
   }

2. 默认导出

   // 导出一个对象
   export default {
     foo: 'hello',
     bar: function() {
       console.log('world');
     }
   };
   
   // 导出一个函数
   export default function() {
     console.log('hello world');
   }

需要注意的是，每个模块只能有一个默认导出，但可以有多个命名导出。

导入模块

使用 import 可以导入模块：

import myModule from './myModule';

如果要导入多个模块，则可以使用以下方式：

import { obj, foo } from './myModule';

AMD

AMD（Asynchronous Module Definition）是一个在浏览器端异步加载模块的规范，它采用异步加载模块的方式。在 AMD 中，一个文件就是一个模块，每个模块都有自己的作用域。模块内部的变量和函数不会被其他模块访问，除非明确地导出。

导出模块

使用 define 可以导出模块：

define(['dep1', 'dep2'], function(dep1, dep2) {
  // 导出一个对象
  return {
    foo: 'hello',
    bar: function() {
      console.log('world');
    }
  };
  
  // 导出一个函数
  return function() {
    console.log('hello world');
  };
});

导入模块

使用 require 可以导入模块：

require(['myModule'], function(myModule) {
  // 使用 myModule
});

UMD

UMD（Universal Module Definition）是一种通用的模块化规范，它既支持 CommonJS，也支持 AMD，还支持全局模块。在 UMD 中，一个文件可以同时兼容多种模块化规范。

导出模块

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // 全局模块
    root.myModule = factory(root.jQuery);
  }
}(this, function($) {
  // 导出一个对象
  return {
    foo: 'hello',
    bar: function() {
      console.log('world');
    }
  };
  
  // 导出一个函数
  return function() {
    console.log('hello world');
  };
}));

导入模块

使用 require 可以导入模块：

var myModule = require('./myModule');

使用 define 可以导入模块：

define(['myModule'], function(myModule) {
  // 使用 myModule
});

使用全局变量可以导入模块：

var myModule = window.myModule;

ES7/ES8/ES9 模块化

ES7/ES8/ES9 中，可以使用 import() 动态加载模块。这种方式可以让我们更加灵活地管理代码。

导出模块

ES7/ES8/ES9 与 ES6 模块化相同，可以使用 export 导出模块。

导入模块

使用 import() 可以动态加载模块：

import('./myModule').then(myModule => {
  // 使用 myModule
});

总结

本文介绍了 JavaScript 中多种模块化方案，包括 CommonJS、ES6、AMD、UMD 和 ES7/ES8/ES9。每种方案都有其优点和缺点，具体使用哪种方案需要根据项目需求来决定。

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