【ES】笔记-ES6模块化

规范

• 每个文件都是一个模块
• 要借助Babel和Browserify依次编译代码，才能在浏览器端运行
• Bebel中文网：https://www.bebeljs.cn/
• Babel可以把es6转成es5

基本语法

模块暴露数据
1、分别暴露 (按需暴露) export 暴露内容
2、统一暴露 export {暴露内容1，暴露内容2}
3、默认暴露 export defalut 暴露内容

分别暴露 (按需暴露)

export const data='asheh'
export const msg='ssss'
export function showMsg(){console.log(msg);
}
export function showData() {console.log(');
}

补充：准备相关依赖包（为编译代码做准备）
全局安装：babel-cli、Browserify ：npm install babel-cli browserify -g
局部安装：babel-preset-es2015： npm install babel-preset-es2015
建立.babelrc文件

{"presets0"["es2015"]
}

}
执行babel ./ -d
翻译 browserify ./build/app.js -o ./build/build.js

统一暴露 export {暴露内容1，暴露内容2}

const school='尚硅谷'
const person={name:'老刘',age:18,sex:'女'
}
function getLaoliu(){console.log(person)
}
//统一暴露--常用`在这里插入代码片`
export {school,person,getLaoliu}
//支持改名
export {school as school ,person as person,getLaoliu as getLaoliu}

默认暴露 (适合只暴露一个数据) 只能暴露一次

export default {name:"wc",age:5
}

同时使用

# [分别暴露]
export const teacher1={name:'强哥',age:15}
export const teacher2={name:'ke 哥',age:35}
# [统一暴露]
const stu1= {name:'网哥',age:25}
const stu1= {name:'掌声',age:33}
export {stu1,stu2}# [默认暴露]
export default{school:'上海dax',address:'shanghai',subject:['计算机','java','大数据']
}

在app.js中引入

# 引入【分别暴露】模块
import {data,msg,showData,showMsg} form './module1' # 注意不是解构赋值# 引入【分别暴露】模块 + 打包加入
import * form './module1'# 引入【分别暴露】模块 + 重命名
import {data as data2} form './module2'# 引入【统一暴露】模块 （和上面三种一样）
import {school as sc,person,getLaoliu} form './module3'# 引入【默认暴露】模块 
import module4 form './module4'# 引入多种暴露方式
import module5,{teacher1，teacher2,stu1,stu2} from './module5'