开发环境配置

基本使用

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
如果你希望外部能够继续读取模块内部的某个变量，就必须使用export关键字输出该变量

es6中新增两个命令 export 和 import

• export :用于规定模块的对外接口
• import :用于导入其他模块提供的功能

// ext.js
export const name='zs'
export const age = 18

export function sayHi(){
    console.log('ext.js......')
}

使用export命令定义了模块的对外接口以后，其他的JS文件就可以通过import命令加载这个模块

// main.js
// 使用花括号{}精确导出某模块中export的变量
import {name,age,sayHi} from './ext'

console.log(name,age)
sayHi()

es6 模块的导出与导入

export 详解

• 精确导出

// ext.js
export const name='zs'
export const age = 18

export function sayHi(){
    console.log('ext.js......')
}

• 在js文件底部统一导出

// ext.js
const name = 'zs'
const age = 18

function sayHi() {
    console.log('ext.js......')
}

// 统一导出，导出多个变量
export {
    name,
    age,
    sayHi
}

import 详解

• import '模块名'
  如果模块是自定义模块，需要使用相对路径

// main.js
import './css/base.css'
import './ext.js' // 直接导入模块，但是外部无法使用模块内的变量

• import {导出的变量} from '模块名'
  通过花括号{}精确导入,导出的变量名和导入的变量名一定要对应

// main.js
// 使用花括号{}精确导出某模块中export的变量
import {name,age,sayHi} from './ext'

console.log(name,age)
sayHi()

默认导出 export default xxx

每个模块可以有一个默认导出

//ext.js
export default sayHi

//main.js
// 导入某模块中默认导出的变量
import abc from './ext' // 这里abc为任意器的名字，导入后，abc即代表ext模块中的默认导出变量sayHi

abc()

默认导出，通常会导出一个对象，对象内包含该模块需要导出的变量，如

// ext.js
const name = 'zs'
const age = 18

function sayHi() {
    console.log('ext.js......')
}

// 默认导出，导出多个变量
export default {
    name,
    age,
    sayHi
}

导入后，通过对象的方式操作变量

// main.js
// 导入某模块中默认导出的变量
import obj from './ext'

console.log(obj.name,obj.age)
obj.sayHi()

模块提供默认导出，会让导入使用更加的方便，如：
import $ from 'jquery' 后，通过$.xxx 可以使用jquery模块内的变量
import Vue from 'vue 后，通过Vue.xxx 可以使用vue模块内的变量

兼容性说明

现在es6的模块化，无论在浏览器还是nodejs上，都没有得到很好的支持，所以需要一些转码的工具(babel),使我们可以用es6的方式来编码，最后输出es5的代码。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。