四、前端模块化

CommonJS（了解）

①CommonJS的导出

var flag = true
module.exports = {
 flag
}

②CommonJS的导入

let { flag } = require('./main.js')

ES6的export基本使用

export指令用于导出变量
①方式一

let name = 'tu'
let age = 18
let height: 160
export {
 name, age ,height
}

②方式二

export let name = 'tu'
export let age = 18
export let height = 160

ES6的导出函数或类

①导出函数

//方式一
export function test(){

}
//方式二
function test(){
}
export { test }

②导出类

//方式一
export class Preson(){
}
//方式二
class Preson(){
}
export { Preson }

③export default
导入者可以自己来命名

export default address //default在同一个模块中，不允许同时存在多个
export default function () {
}
import addr from './info.js'

ES6的import

①需要在HTML代码中引入js文件，并且类型需要设置为module

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>

②import指令用于导入模块中的内容，比如main.js的代码

import { name, age, height} from './info.js'

③模块中所有的信息都导入

import * as info from './info.js'

④只有在export default时才可以以这种方式(相当于自己起名字)导入

import HelloVuex from './components/HelloVuex'