JS模块化:ES6规范

    ES6规范说明:
        依赖模块需要编译打包处理
    ES6规范语法:
        导出模块:export
        引入模块:import
    ES6规范实现(浏览器端):
        使用Babel将ES6编译为ES5代码
        使用Browserify编译打包js

举个栗子:

第一步创建目录结构如下,定义package.json

{
            "name":"es6_babel_browserify",
            "version":"1.0.0"
        }

第二步:
       安装babel-cli,babel-preset-es2015和Browserify // cli: command line interface(命令行接口)
       下载babel-cli 用来使用babel命令
        npm install babel-cli browserify -g
        npm install babel-preset-es2015 --save-dev
        preset 预设(将es6转换为es5的所有插件打包)

第三步:

在根目录下创建并定义.babelrc文件 ( rc:run control )运行时控制文件
        {
            "presets":["es2015"]
        }

第四步:编码

module1.js

//暴露模块
//分别暴露(常规暴露)

export function foo(){
	console.log('foo module1')
}

export function bar(){
	console.log('bar module1')
}

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

module2.js

// 统一暴露(常规暴露)

function fun1(){
	console.log('fun1 module2')
}

function fun2(){
	console.log('fun2 module2')
}

export {fun1,fun2}

module3.js

// 默认暴露 可以暴露任意数据类型 暴露的什么数据就接受到什么数据
// 默认暴露只能暴露一次
// export default value
export default  {
	msg:'我是默认暴露',
	foo(){
		console.log(this.msg)
	}

}

main.js

// 引入其他模块

// 语法: import xxx from '路径'

// 对象的解构赋值
import {foo,bar,arr} from './module1' 
import {fun1,fun2} from './module2' 
import module3 from './module3'


foo()
bar()
console.log(arr)
fun1()
fun2()
module3.foo()

第五步:编译

使用babel将es6编译为es5代码(包括CommonJS语法):
            babel js/src -d js/build (babel 可以创建文件 Browserify不能)
使用browserify编译js
            browserify js/build/main.js -o js/dist/bundle.js

编译后的目录结构如下:

index.html:

打印结果如下: