在使用React写组件的时候，第一行我们总是会这么写import xxx from 'xxx'。很简单，引入一个模块。但是你有考虑过，为什么通过import我们就可以直接引入一个模块吗？除了import还有其他的方法吗？今天我们就来了解一下ES6的模块化。
发展过程
一个大型项目的开发，可能会用到成百上千个js文件。如果我们需要一个一个的用script标签引入，那要多么复杂。如果我们在一个情况下需要这些代码，另一个情况下需要其他的代码，这时候我们要怎么引入？能不能按需加载？聪明的人想了办法，提出来模块化的概念。下面先为大家介绍一下模块化的发展历程。
没有模块 -> CommonJS(同步) -> AMD(异步) -> ES6语言提供的模块化支持
- CommonJS: 是node使用的模块引入的方法，它是同步的，主要使用在服务器端。
- AMD：Asynchronous Module Definition，它是浏览器端模块化开发的规范。这个规范的实现，是通过一个我们经常使用的库来实现的——RequireJS。
- ES6语言提供的模块化: import/export，它是ES6中自带的语法。但是需要注意，现在的一些主流浏览器一般不支持，所以大部分情况都是通过webpack来转化一下。
暴露模块--export
在ES6中，我们通过export来实现模块的导出。我们在其他文件需要什么，就可以暴露什么。一个js文件中可以多次使用export.直接来看代码。
// 定义+输出
export let a = 1;
// 先定义后一起输出
let a = 1;
const b = 2;
export {a,b};
// 默认输出
export default class XXX {};
复制代码除了导出本文件中定义的一些变量，方法，类等，我们还可以从另一个模块中导出。
export * from './model';
export {a,b,c} from './model';
export { default } from './model';
复制代码引入模块--import
之前的需要的模块已经暴露出来了，这时候我们在需要的文件中直接使用import引入就可以了。
// 引入这个文件中所有暴露出来的成员
import * as modle from './xxx';
//引入部分成员
import {a,b ,c ....} from './xxx'
// 引入默认成员
import xxx from './mod';
复制代码在引入这些这个模块后，我们就可以直接使用这个模块中暴露出的成员。
但是还有一些情况是，我们需要将模块的代码引入进来，而不是引入内部的成员。这种情况通常是用来加载一些资源，如样式文件，图片资源等。
import './index.css';
import './index.less';
import './model.jpg';
复制代码异步加载
当然，我们也可以使用异步加载的方式来加载一个模块，保证文件的加载速度。需要注意的是，异步加载必须是使用绝对路径。
let promise = import ('绝对路径');
promise.then(model => {
console.log('model', model);
}, err => {
console.log('failed');
})
复制代码以上，就是关于ES6模块化的一个简单的介绍。其实我们在项目开发的过程中，最常使用的就是import xxx from './mod';的形式。当然，其他的情况也是需要了解的。