JS模块化——ES6相关笔记

ES6

一、规范

1.1 说明

• http://es6.ruanyifeng.com/#docs/module
• 依赖模块需要编译打包处理

1.2 语法

• 导出模块: export
• 引入模块: import

二、实现

• 使用Babel将ES6编译为ES5代码
• 使用Browserify编译打包js

三、ES6-Babel-Browserify使用教程

1. 定义package.json文件

npm init -y 

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

• npm install babel-cli browserify -g (cli:command line interface 命令行接口)
• npm install babel-preset-es2015 --save-dev

3. 定义 .babelrc 配置文件（rc即run control运行控制文件）

   {
    "presets": ["es2015"]
    }
   

4. 编码

• js/src/module1.js

  // 分别暴露模块
  export function foo() {
    console.log('foo() module1')
  }
  
  export function bar() {
    console.log('bar() module1')
  }
  
  export let arr = [1, 2, 3, 4, 5, 6]
  

• js/src/module2.js

  // 统一暴露
  function fun() {
    console.log('fun() module2')
  }
  
  function fun2() {
    console.log('fun2() odule2')
  }
  
  export {
    fun,
    fun2
  }
  

• js/src/module3.js

  // 默认暴露，可以暴露任意数据类型，暴露什么数据接收到的就是什么数据
  // 语法：export default value
  
  
  // export default () => {
  //   console.log('我是默认暴露的箭头函数')
  // }
  
  // 默认暴露一个对象
  export default {
    msg: '默认暴露',
    foo() {
      console.log(this.msg)
    }
  }
  

• js/src/main.js

• 在ES6这种模块化规范里，如果用分别暴露或者统一暴露（常规暴露）这两种方式都有一个特点：要求在引入的时候必须用对象解构赋值的形式

  // 引入其他模块
  
  // 语法：import xxx from '路径'
  
  import {foo, bar} from './module1'
  import {fun, fun2} from './module2'
  import module3 from './module3'
  
  foo()
  bar()
  fun()
  fun2()
  module3.foo()
  

5. 编译

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

6. 页面中引入测试

<script type='text/javascript' src='./js/build/bundle.js'></script>

当修改模块js文件被修改后，需将编译这部分操作重复一遍

1. 引入第三方模块(jQuery)
   1). 下载jQuery模块:

   • npm install jquery@1 --save （@1即指定下载1版本里最新的版本，@后接要指定的版本号）
     2). 在main.js中引入并使用

   import $ from 'jquery'   // 引入第三方库
   $('body').css('background', 'pink')