ES6 模块语法

ES6 模块语法

ES6 中引入了 export, import 来用于导入与导出。

export 导出

• 使用 export 关键字来导出一个变量(常量)

  export const someValue = 1234
  export const someValue0 = '1234'
  export const someValue1 = {}
  export let someValue2 = 1234
  export let someValue3 = '1234'
  export function someFunc = a => a+1
  

• export写法还可以这么写

  const someValue = 1234
  function someFunc = a => a+1
  let someObj = {}
  
  export { someValue, someFunc, someObj}
  

• 还可以重命名变量导出

  const someValue = 1234
  function someFunc = a => a+1
  let someObj = {}
  
  export {
  	someValue as exportNum,
      someFunc as exportFunc,
      someObj as exportObj
  }
  

• 当然还可以使用 default来导出默认值，default在一个文件中，最多使用一次

  export defalut someValue = 1234
  

import 导入

• 导入指定变量

  import { someValue } from './exportFile'  // 导入一个
  
  import { someFunc, someObj } from './exportFile'   // 导入多个
  

• 重命名导入指定变量

  import { someValue as importValue } from './exportFile'  // 重命名一个
  
  import { someFunc as importFunc , someObj as importObj } from './exportFile' // 重命名多个
  
  import {
      someValue,
      someFunc as importFunc 
  }  // 导入多个，且部分重命名
  

• 整体加载

  import * as importModule from './exportFile'  // 导入全部且挂载在 importModule 对象上
  
  console.log(importModule.someValue)  // 1234
  

• 仅导入模块

  import 'animate.css'
  

• 导入默认值

  // 就是使用 default 导出的变量，导入的时候我们要为它命名
  import value from './exportFile'
  

import 与 export 组合使用

• 从其它模块整体导出

  export * from './exportFile'
  

• 从其它模块部分导出

  export { exportValue } from './exportFile'
  

• 从其它模块部分重命名导出

  export { funcName as exportFunc } from './exportFile'
  

参考链接，阮老师的博客