6. ES6模块化教程

ES6-Babel-Browserify

语法：

	 **导出模块:
	1. 分多次导出模块的多个部分
			export class Emp{  }
			export function fun(){  }
			export var person = {};
	2. 一次导出模块的多个部分
			class Emp{  }
			function fun(){  }
			var person = {};
			export {Emp, fun, person}
	3. default导出(只能有一个)
			export default {}
	
	**导入模块
	import defaultModule from './myModule';  //导入默认的
	import {Emp} from './myModule'; //导入指定的一个
	import {Emp, person} from './myModule'; //导入指定的多个
	import * as allFromModule from './myModule';  //导入所有

babel官网

1. 定义package.json文件

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

2. 安装babel-cli, babel-preset-es2015和browserify
   • npm install babel-cli browserify -g // 全局安装
   • npm install babel-preset-es2015 --save-dev // --save-dev表示开发时依赖的
   • preset 预设(将es6转换成es5的所有插件打包)

 cli : command line interface 命令行接口；
 作用 ：比如node安装时自动下载了npm，npm把所有的命令打包放在了cli文件夹中，所以node才能执行npm命令！
 有些库是没有自动下载cli的，需要另外手动下载，比如 babel-cli
 babel 除了将ES6转为ES5，另一个作用就是将JSX语法转为JS； 目前只需要安装 ES6转为ES5 对应的库（babel-preset-es2015）即可

3. 定义.babelrc文件

   {
   "presets": ["es2015"]
   }
   

   rc: run control 运行时控制文件
   配置文件，也是json，但是不能添加json后缀；
   babel插件开始运行之前，先读取配置文件.babelrc中的“presets”数组，了解babel插件工作的目的；
   如数组中有值 "es2015"：将 ES6转为ES5；值"react":  将JSX语法转为JS
   

4. 编码

• js/src/module1.js 分别暴露

  export function foo() {
    console.log('module1 foo()');
  }
  export function bar() {
    console.log('module1 bar()');
  }
  export const DATA_ARR = [1, 3, 5, 1]
  

• js/src/module2.js 统一暴露

  let data = 'module2 data'
  
  function fun1() {
    console.log('module2 fun1() ' + data);
  }
  
  function fun2() {
    console.log('module2 fun2() ' + data);
  }
  
  export {fun1, fun2}
  

• js/src/module3.js 默认暴露

  export default {
    name: 'Tom',
    setName: function (name) {
      this.name = name
    }
  }
  // 或者    只能有一个 export default 
  //     export default () => {
  //        console.log("默认暴露箭头函数")
  //    }
  

• js/src/app.js

  import {foo, bar} from './module1'
  import {DATA_ARR} from './module1'
  import {fun1, fun2} from './module2'
  import person from './module3'
  
  import $ from 'jquery'
  
  $('body').css('background', 'red')
  
  foo()
  bar()
  console.log(DATA_ARR);
  fun1()
  fun2()
  
  person.setName('JACK')
  console.log(person.name);
  

5. 编译

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

  在js的上级目录下执行：
  
  babel js/src -d js/lib   将 src 文件夹下的es6代码 转为 es5代码 并输出到 lib 文件夹
  转为es5代码后  查看lib下的app.js
  <script type="text/javascript" src="js/lib/app.js"></script>
  发现有使用到require语法，需要再使用 Browserify编译js ，否则报错 require is not define
  
  browserify js/lib/app.js -o js/lib/bundle.js  
  打包成 bundle.js 后；如果再次修改模块 module 中的代码，需重新执行编译命令打包执行；
  避免重复执行，需用到自动化工具
  

6. 页面中引入测试

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

7. 引入第三方模块(jQuery)
   1). 下载jQuery模块:
   • npm install jquery@1 --save
     2). 在app.js中引入并使用

   import $ from 'jquery'
   $('body').css('background', 'red')