FE - 走向Node与Webpack 之路 - ECMAScript 6.0 模块化

推荐资料

ECMAScript 6 入门 （没有更好的，阮一峰老师的）

【声明】这篇文章是我学习后的总结，谢谢

1. module

【摘】历史上，

JavaScript

一直没有模块（

module

）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如

Ruby

的

require

、

Python

的

import

，甚至就连

CSS

都有

@import

，但是

JavaScript

任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在

ES6

之前，社区制定了一些模块加载方案，最主要的有

CommonJS

和

AMD

两种。前者用于服务器，后者用于浏览器。

ES6

在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代

CommonJS

和

AMD

规范，成为浏览器和服务器通用的模块解决方案。

CommonJs 基本用法可以参考：

FE - 走向Node与Webpack 之路 - CommonJS 模块化

CommonJs 与 ES6 模块化原理区别：

ES6 : 静态加载，使得编译时就能确定模块的依赖关系，以及输入和输出的变量

CommonJs : 动态加载，只有运行时才去加载和确定依赖关系；

2. export & import

export : 规定模块的对外接口

import : 输入其他模块提供的功能

基本用法：

example-export.js

var filename = 'f1';
var filename2 = 'f2';

function add(x, y) {
return x + y;
}
export var file1='fff'; //right

export funcation addX(){  //right
return 'addx';
}

export function area(x, y) { //right
return x * y;
}

export function ference(x, y) { //right
return (x + y) * 2;
}

//同时提供多个变量和方法（组合成接口形式才可以（使用{}））
export {filename, filename2,add}

// 对外提供的是一个接口，不能是一个值
export filename; // error
export {filename}; //right

// 提供函数
export add;  //error
export {add}; //right

example-import.js

//导入接口中的变量 ： as 取别名 ， from 后路径可以是绝对路径 后缀可以不加
import {filename, filename2 as f2} from "./example";

console.log(filename);
console.log(f2);

//整体导入： 取别名
import * as reac from "./example";
console.log(reac.area(1, 2));
console.log(reac.ference(1, 2));

export defualt

为模块指定默认输出；

export

export default function foo() {  // 指定默认输出
console.log('export default!')
}

export default function () {      // 指定默认输出
console.log('export default!')
}

export function hi(name) {  // 正常输出
console.log(name + ' say hi!');
}

function hello(){
return 'hello';
}

let a='123aa';
let b='123bb';
export {a as default,b} //指定默认输出

export defualt let c ='123cc'; //默认输出值
export default hello; //默认输出方法

export default 42; //right
export 42; //error

import

//1.默认输出没有名字: 自定义名字
import a from "./example";
//如果 example 提供的default 是函数，直接调用 a(x,x);

//2.默认输出没有名字，和其他有名字的 : 有名字的还需要使用{}
import a,{foo} "./example"

//3.假如知道 aa 是 default的
import {defualt as aa,foo} from "./example"
//等同于 import aa,{foo} from "./example"

模块间继承

同时使用export 和 import

//从example 导入 ，改名后，导出
export {area as reactArea} from './example';

//从example 导入，整体导出
export * from './example';

//从example导入后，作为默认输出
export {default} from './example';

常量

//export
export const db = {
name: 'yuan',
pass: 'no'
}
//import
import {db} from './example'
console.log(db.name+' | '+db.pass);

3.node 加载

【摘】在静态分析阶段，一个模块脚本只要有一行import或export语句，Node 就会认为该脚本为 ES6 模块，否则就为 CommonJS 模块。如果不输出任何接口，但是希望被 Node 认为是 ES6 模块，可以在脚本中加一行语句。

export {};

import 加载 CommonJs 模块

【摘】使用

import

命令加载

CommonJS

模块，

Node

会自动将

module.exports

属性，当作模块的默认输出，即等同于

export default

。

// a.js
module.exports = {
foo: 'hello',
bar: 'world'
};

// 等同于
export default {
foo: 'hello',
bar: 'world'
};

import * as baz from './a';

require 命令加载 ES6 模块

采用require命令加载 ES6 模块时，ES6 模块的所有输出接口，会成为输入对象的属性。

// es.js
let foo = {bar:'my-default'};
export default foo;
foo = null;

// cjs.js
const es_namespace = require('./es');
console.log(es_namespace.default);
// {bar:'my-default'}

完