JS模块化（四）ES6的应用（目前使用较广，较火）

ES6模块化需要编译打包处理，由于目前部分浏览器不支持es6，需要先转换es5

基本使用

• 暴露出去 export
• 应用进来 import
• 使用方式
  1. 先用babel转化es5
  2. 使用browserify编译转换
• 需要提前安装一些库
  npm install babel-cli browserify -g
npm install babel-preset-es2015 --save-dev

自定义依赖

• 文件结构 （列举了主要部分）

│  .babelrc
│  package-lock.json
│  package.json
│
├─js
│  ├─dist
│  └─src
│          main.js
│          modules1.js
│          modules2.js
│          modules3.js

• .babelrc (babel run controller)

{
	"presets":["es2015"]
}

• 各个模块文件

modules1.js

// 暴露模块  分别暴漏
export function foo(){
	console.log("foo() module1");
}

export function bar(){
	console.log("bar() module1");
}

export let arr = [1,2,3,4,5];


modules2.js

// 暴露模块 统一暴露
function fun1 () {
	console.log("fun1() module2");
}

function fun2 () {
	console.log("fun2() module2");
}

export {fun1, fun2}


modules3.js

// 默认暴露 export default 

export default {
	msg:"默认暴露",
	foo(){
		console.log("foo() modules3",this.msg);
	}
}

• 主文件 main.js

// 引入其他模块

// 语法 import xxx from '路径'

// 统一暴露方式  统一暴露方式 是要什么取什么
import {foo, bar, arr} from './modules1';
import {fun1, fun2} from './modules1';

// 默认暴露
import modules3 from './modules3';

foo();				// foo() module1
bar();				// bar() module1
console.log(arr);	// [ 1, 2, 3, 4, 5 ]
fun1();				// fun1() module2
fun2();				// fun2() module2 

modules3.foo();		// foo() modules3 默认暴露

• 编译打包

  1. babel命令 es6-es5 babel js/src -d js/lib
  2. 使用browserift命令 browserify js/src/main.js -o js/dist/bundle.js

• 将最终的bundle放入index.html

<script type="text/javascript" src="04-ES6/js/dist/bundle.js" ></script>

这种方式需要首先使用babel将es6-es5,在使用browserify进行编译打包，每一次改变都需要这样，相对较为繁琐（所以就有了后面的自动打包工具）

使用第三方依赖

• 在npm安装依赖 （jquery为例 npm install jquery@1.12.4）

• 在主文件中引入即可

import $ from "jquery";

$("body").css("background","yellowgreen");

• 使用babel与browserify分别进行编译 打包

• 最后html代码还是 放入browserify最终生成的代码

<script type="text/javascript" src="04-ES6/js/dist/bundle.js" ></script>

使用ES6的这种方式 相对来时 是比较简单的，而且命令也相对好记 export与import这种方式也是使用最为广泛，目前比较好的一种方式，唯一不好的就是需要每一次都编译打包，后来诞生出一些自动化工具。