ES6模块化教程

ES6模块化教程

1、编写自定义模块

• 建立文件结构：

  -src
      -index.html
      -module1.js
      -module2.js
      -module3.js
      -module4.js
      -app.js
  

• module1.js，使用分别暴露

  //【分别暴露】
  export function sum(a,b){
  	console.log(a+b)
  }
  
  export function sub(a,b){
  	console.log(a-b)
  }
  
  export const a = 1
  

• module2.js，使用统一暴露

  const school = 'ycu'
  const person = {
  	name:'赖',
  	age:22
  }
  
  function getPerson(){
  	console.log(person)
  }
  
  //统一暴露(精简版)----用的多
  export {school,person,getPerson}
  
  //统一暴露(完整版)
  // export {school as school,person as person,getPerson as getPerson}
  

• module3.js，使用默认暴露

  //使用【默认暴露】--------只能暴露一次
  export default {
  	name:'audi',
  	price:40
  }
  

• module4.js，各种暴露方式混用

  //【分别暴露】
  export function sum5(a,b){
  	console.log(a+b)
  }
  
  export function sub5(a,b){
  	console.log(a-b)
  }
  
  export const a5 = 1
  
  const school5 = 'ycu'
  const person5 = {
  	name:'赖',
  	age:22
  }
  
  function getPerson5(){
  	console.log(person5)
  }
  
  //统一暴露(精简版)----用的多
  export {school5,getPerson5}
  
  //使用【默认暴露】--------只能暴露一次
  export default {
  	name:'audi',
  	price:40
  }
  

2、下载第三方模块

• 执行命令（以uniq为例）

  npm i uniq
  

3、主文件引入

• app.js引入各个模块

  //引入【分别暴露】模块
  import {sum,sub,a} from './module1.js'
  
  //引入【分别暴露】模块+重命名
  import {a as a1} from './module2.js'
  
  //引入【分别暴露】模块+打包引入
  import * as obj from './module1.js'
  
  //引入【统一暴露】模块(和上面三种引入方式同理)
  import {school,person,getPerson} from './module3.js'
  
  //引入【默认暴露】模块
  import module4 from './module4.js'
  
  //引入多种暴露方式的模块
  import module5,{sum5,sub5,a5,school5,getPerson5} from './module5.js'
  console.log(module5)
  sum5(1,1)
  sub5(3,2)
  console.log(a5,school5)
  getPerson5()
  
  /* sum(1,2)
  sub(2,1)
  getPerson()
  console.log(a,a1,school,person)
  console.log(module4.name,module4.price) */
  

4、准备相关的依赖（为编译代码做准备）

• 安装Babel包，Browserify

  // npm一次性安装多个包，包名之间用空格隔开
    npm install --save-dev @babel/cli @babel/core @babel/preset-env
    npm install -g browserify 
  

• 定义babel.config.js文件

  module.exports = {
  	presets: ["@babel/env"],
  	plugins: []
  }
  

5、编译代码

• 进入目录，使用Babel将ES6编译为ES5代码：

  npx babel ./src -d ./build
  

• 继续使用Browserify编译上一步的js

  browserify ./build/app.js -o ./build/build.js
  

6、页面中引入测试

• index.html页面中引入build/build.js

 `<script src="../build/build.js" type="text/javascript" charset="utf-8"></script>`