ES6模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

(1)ES6模块化语法

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

模块默认输出, 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

（2）ES6-Babel-Browserify使用教程

简单来说就一句话：使用Babel将ES6编译为ES5代码，使用Browserify编译打包js。

1. 定义package.json文件

   {
      "name" : "es6-babel-browserify",
      "version" : "1.0.0"
    }

    

2. 安装babel-cli, babel-preset-es2015和browserify

3. 定义.babelrc文件

4. 定义模块代码

   //module1.js文件
   // 分别暴露
   export function foo() {
     console.log('foo() module1')
   }
   export function bar() {
     console.log('bar() module1')
   }
   //module2.js文件
   // 统一暴露
   function fun1() {
     console.log('fun1() module2')
   }
   function fun2() {
     console.log('fun2() module2')
   }
   export { fun1, fun2 }
   //module3.js文件
   // 默认暴露 可以暴露任意数据类项，暴露什么数据，接收到就是什么数据
   export default () => {
     console.log('默认暴露')
   }
   // app.js文件
   import { foo, bar } from './module1'
   import { fun1, fun2 } from './module2'
   import module3 from './module3'
   foo()
   bar()
   fun1()
   fun2()
   module3()

   5.编译并在index.html中引入

• 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
• 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js

• 然后在index.html文件中引入

  <script type="text/javascript" src="js/lib/bundle.js"></script>

最后得到如下结果：

此外第三方库(以jQuery为例)如何引入呢？
首先安装依赖npm install jquery@1
然后在app.js文件中引入

//app.js文件
import { foo, bar } from './module1'
import { fun1, fun2 } from './module2'
import module3 from './module3'
import $ from 'jquery'

foo()
bar()
fun1()
fun2()
module3()
$('body').css('background', 'green')

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。