看一下官方引见：
Language-level support for modules for component definition.
JS在ES2015最先原生支撑模块化开辟，我们之前也曾借助于诸如：
AMD
CommonJS
等的模块加载器举行过模块化开辟，我想说的是那些都没有本日要讲的简朴好用。
⚠️ 正告，正式版中的ES2015中没有模块加载器，所以我们依旧须要之前的模块加载器协助我们。
先来引见下语法(官方示例代码)：
//lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
//app.js
import * as math from 'lib/math';
import {sum, pi} from 'lib/math';
console.log("2π = " + math.sum(math.pi, math.pi));模块中对象暴露
只须要 export xx 即可，可所以任何范例的对象。
从模块中导入
运用 import 即可, 几种体式格局
import * as xx from ..
导入某个模块下的统统到某个定名空间下，如示例代码中的 import * as math from ‘lib/math’, 意行将lib/math下统统暴露的对象导入到math对象下，以后就能够只用math.xxx访问了。
import {x, y, z} from ..
手动导入模块下某个对象，x, y, z 须要和模块中定义的名字对应，递次无关。
稍微有点烦琐了是吧？来看下面这类：
//lib/math.js
export default function (x, y) {
return x + y;
}
//app.js
import sum from 'lib/math';如许以来，写法上简朴了很多，如果有default，也有其他的export怎么办呢？以下：
import default, {other1, other2} from 'someMoule';平常在开辟中，只暴露一个default的状况占大多数。
另有一个叫 export *, 用来在某个模块内将另一个模块的暴露的对象在这个模块从新暴露出去，个人以为用途不是很大，不做过量形貌。
下面，我们继承实战，依旧是在ES2015入门系列10-类 classes中写的游戏，我们是在一个文件里运转的，下面我们将代码举行分拆成几个文件，进入模块化开辟:
运用ES2015入门系列9-Babel和Rollup的设置，我们的目次构造以下：
es2015-learning
dist
src
Game.js
Hero.js
main.js
Monster.js
Role.js
Game.js 代码
import Monster from './Monster.js';
import Hero from './Hero.js';
export default class Game { //游戏天下
constructor() {
this.name = "权益的游戏";
this.hero = new Hero('Jon Snow', 10); // 初始化好汉Jon Snow
this.monsters = [ //怪物鸠合，模仿简朴的游戏关卡。
new Monster('异鬼 01', 1, 10),
new Monster('异鬼 02', 3, 30),
new Monster('异鬼 03', 5, 50),
new Monster('异鬼 04', 10, 100),
new Monster('异鬼 05', 15, 150),
new Monster('异鬼 06', 20, 200),
new Monster('Night King', 50, 500)
];
this.level = 0; // 游戏当前关卡纪录
console.log(`你在[${this.name}]中饰演[${this.hero.name}], 征程行将最先...`);
}
play() { // 游戏最先
while (this.level < this.monsters.length && ! this.hero.isDead()) {
let monster = this.monsters[this.level];
console.log(`关卡[${this.level + 1}] 你遇到了[${monster.name}], 进入战役:`);
let offensive = this.hero;
let defensive = monster;
while (! this.hero.isDead() && ! monster.isDead()) {
offensive.attack(defensive);
let middleman = offensive;
offensive = defensive;
defensive = middleman;
}
if (this.hero.isDead()) {
console.log(`你被[${monster.name}]打败了, 游戏完毕!`);
break;
}
if (monster.isDead()) {
console.log(`你打败了[${monster.name}] 品级提拔:[${monster.level}]`);
this.hero.levelUp(monster.level);
this.level ++;
}
}
if (this.level === this.monsters.length) {
console.log(`祝贺你通关游戏!`);
}
}
}Hero.js 代码
import Role from './Role.js';
export default class Hero extends Role {
attack(role) { //进击，有几率是用必杀进击
if (! this.isCriticalStrike()) {
return this.criticalStrike(role);
}
return this.strike(role);
}
criticalStrike(role) { //必杀进击
let power = parseInt(200 * Math.random() + 50);
role.damage(power);
console.log(`[${this.name}]运用必杀进击了[${role.name}], 造成了[${power}]点危险`);
}
isCriticalStrike() {
return Math.random() > 0.70;
}
}Monster.js 代码
import Role from './Role.js';
export default class Monster extends Role {
}Role.js 代码
export default class Role { //角色基类
constructor(name, level = 1, health = 100) {
this.name = name;
this.level = level;
this.health = health;
}
isDead() { //推断角色是不是殒命
return this.health <= 0;
}
levelUp(level = 1) { //晋级
this.level += level;
}
damage(power) { //遭到危险
this.health = this.health - power;
}
attack(role) { //进击
this.strike(role);
}
strike(role) { //普通进击
let power = parseInt(Math.random() * 20 * this.level / 10);
role.damage(power);
console.log(`[${this.name}]进击了[${role.name}], 造成了[${power}]点危险`);
}
}末了， main.js 代码
import Game from './Game.js';
new Game().play();统统准备就绪，实行:
npm run build将编译后的dist/main.js,放入网页中，运转，Yeah！It works!
祝贺，我们一同学会了ES2015带给我们的模块化开辟!
Keep on hacking!
