开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：前端技术-模块化操作（es6写法）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11323
前端技术-模块化操作（es6写法）
内容介绍：
一、es6 模块化代码写法
二、es6 的简化写法
一、es6模块化代码写法
注意：如果使用 es6 写法实现模块化操作，在 node js 环境中不能直接运行模块化操作。需要使用 Babel 把 es6代码转换 es5 代码，才可以在 node.js 中运行。
1、编写代码
01.js：
新建 modulees6 文件夹，分别创建01.js 和 02.js 文件，在02.js 文件中去调用01.js 方法。
//定义方法，设置哪些方法可以被其他 js 调用
export function getList() {
console.log(‘getList…………’)
}
表示定义方法为 getList,不同于 es5 先定义后设置，export 可以让其他 js 直接被调用。
另一方法：
export function save() {
console.log(‘save…………’)
}
02.js
//调用 01.js 的方法，引入 01.js 文件，进行调用
import {gerList,save} from ‘./01.js’
//调用方法
getList()
save()
注明：{}内为所要调用的方法名称，from 后为引入路径
2、测试
由于是 02.js 调用 01.js ，因此运行的是 02.js。
（1）直接运行
在终端打开，用 node js 执行：
e:\work\vs1010\babeldemo\modulees61>node 02.js
返回结果报错：
e:\work\vs1010\babeldemo\modulees61>node 02.js e:work\vs1010\babeldemo modulees61102js:2
import {getList,save} from'./01.js'^
SyntaxError:Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThiscontext(vm.js:303:10)
at Module. _compile(internal/modules/cjs/loader.s:657:28)
at Object.Module._extensions..js(internal/modules/cjs/loader.js:700:10)
at Module.load(internal/modules/cjs/loader.js:599:32)
at tryModuleload(internal/modules/cis/loader.js:538:12)
at Function.Module._load(internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain(internal/modules/cjs/loader.js:742:12)
at startup(internal/bootstrap/node.js:282:19)
e:\work\vs1010\babeldemo\modulees61>
import {getList,save} from'./01.js'^
说明系统无法识别。正确运行需通过转换。
（2）转换运行
新建 ees611 文件夹，在文件夹中通过 babel 转换为 es5 代码。
转换方法：
#转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js –out dist1/compiled.js
#或者
Babel src/example.js -odist1/compiled.js
#整个目录转码
Mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
#或者
Babel src -d dist2
当前是两个文件，用最后一种方法最为简便：
e:\work\vs1010\babeldemo>babel modulees61 -d es611
modulees61\01.js ->es611\01.js
modulees61\02.js ->es611\02.js
e:\work\vs1010\babeldemo>
转换结果如下。
01.js 为：
Object.defineProperty(exports,”_esModule”,{
Value:true
});
exports.getList=getList;
exports.save=save;
02.js为：
Var_ =require(‘./01.js’);
成功转换为 es5
在终端执行：
e:\work\vs1010\babeldemo\es611>node 02.js
getList…………
save…………
e:\work\vs1010\babeldemo\es611>
二、es6 的简化写法
1、编写代码
新建 modulees62 文件夹，同样建立 01.js 和02.js 文件。
01.js：
//定义方法，设置哪些方法可以被其他 js 调用
export default{
getList() {
console.log(‘getList…..’)
},
update(){
console.log(‘update…..’)
}
}
02.js:
//调用 01.js 的方法，引入 01.js 文件，进行调用
import m from ‘./01.js’
//调用方法
m.getList()
m.update()
2、测试
新建 es622文件夹，通过 babel 进行转换：
e:\work\vs1010\babeldemo>babel modulees62 -des622
modulees62\01.js ->es622\01.js
modulees62\02.js ->es622\02.js
e:\work\vs1010\babeldemo>[]
用终端打开进行调用：
e:\work\vs1010\babeldemo\es622>node 02.js
getList…..
update…..
e:\work\vs1010\babeldemo\es622>[]
模块化指的是 js 之间的调用。通过一个 js 去调用另一个 js 中的方法
具体操作：
如02调用01文件。先在01中定义方法，设置哪些方法可以被调用,在02中完成引入文件后再进行调用。上述的 es6 简化方法更为常用。
