js模块化世界

前言

我们经常见到 一些这样的写法，require('xxx')、import xx from '../components/data'、export const data、。。。也听见一些这样的说法：commonjs 规范、AMD规范。。。

其实 都是 属于模块化概念里的东西了。所谓模块化，就是将一些功能 独立化、块状化，易于被别人使用。这是代码开发向前的趋势了。这里主要说一下当前模块化的 主要规范。所谓规范，即 遵从的一些语法标准。

主要有三大规范：commonJS、AMD、es6模块化 

commonJS： 

同步加载依赖模块，require导入、module.exports导出。 

语法： 

// 导入
const moduleA = require('./moduleA');

// 导出
module.exports = moduleA.someFunc;

 

优点： 

Node.js环境 可运行；npm的第三方模块 多使用 该规范 

缺点： 

浏览器环境不支持，须转换 

 

注：CommonJS 还可以细分为 CommonJS1 和 CommonJS2，区别在于 CommonJS1 只能通过 exports.XX = XX 的方式导出，CommonJS2 在 CommonJS1 的基础上加入了 module.exports = XX 的导出方式。 CommonJS 通常指 CommonJS2。

AMD 

异步加载模块。主要是为了解决浏览器环境的模块化问题，代表性 如 requirejs。 

语法： 

// 定义一个模块
define('module', ['dep'], function(dep) {
  return exports;
});

// 导入和使用
require(['module'], function(module) {
});

 

优点： 

可直接在浏览器环境运行；可并行加载多个模块；支持node环境和浏览器环境 

缺点： 

js环境 运行 需要amd库的支持。 

Es6模块化 

Import;export。取代 commonJS 和 AMD 成为 通用解决方案。

// 导入
import { readFile } from 'fs';
import React from 'react';
// 导出
export function hello() {};
export default {
  // ...
};

缺点： 

浏览器需要 转换为es5.