ES6模块化

ES6模块化

模块化优势：

• 防止命名冲突
• 代码复用
• 高维护性

ES6模块化主要由两个命令组成： export和import

export用于规定模块的对外接口
import用于输入其他模块的功能

1. 模块暴露方式

1.1 分别暴露

//m1.js
export let school = 'xxx'
export function teach() {
    console.log('一起学习')

}

1.2 统一暴露

//m2.js
let school = 'xxx'
function teach() {
    console.log('一起学习')

}
export {school,teach}

1.3 默认暴露

//m3.js
export default {
    school: 'xxx',
    change: function(){
        console.log()
    }

}

2. 导入方式

2.1 通用导入方式

    import * as m1 from './src/js/m1.js'
    import * as m2 from './src/js/m2.js'
    import * as m3 from './src/js/m2.js'
    //默认暴露方式在导入时需要多加一层default
    m3.default.change()

2.2 解构赋值形式

//分别暴露
import {school,teach} from './src/js/m1.js'
//统一暴露
import {school as xxx,teach as xxxx} from './src/js/m2.js'
//默认暴露
import {default as m} from './src/js/m3.js'

2.3 简便导入方式

• 只适用于默认暴露方式

import m3 from './src/js/m3.js'

3. 浏览器中使用ES6模块化方式

3.1 script标签引入

<script type="module">
	import * as m1 from './src/js/m1.js'
    import * as m2 from './src/js/m2.js'
    import * as m3 from './src/js/m2.js'

<script/>

3.2 引入一个文件

• 引入app.js文件

<script src='./src/js/app.js' type="module">

</script>

• app.js文件

//app.js
	import * as m1 from './src/js/m1.js'
    import * as m2 from './src/js/m2.js'
    import * as m3 from './src/js/m2.js'

babel对ES6模块化代码转换

• babel是一个JS编译器，将源代码转为浏览器可以识别的代码
• babel-cli babel-preset-env browserify(这是一个打包工具) 项目中一般使用webpack打包

npm init --yes
1.安装 npm i babel-cli babel-preset-env browserify -D

• 全局安装的话需要加上 -g
• 全局安装的话可以直接使用babel命令 局部安装的话需要使用 npx babel

关于npm全局安装和局部安装的问题

2.npx babel src/js -d dist/js --presets=bable-preset-env
3.打包 npx browserify dist/js/app/js -o dist/bundle.js