前端模块化ES6用法

框架：VUE
核心：一个js 文件就是一个模块
使用 export 导出：
export 命令，有以下几种写法
一、使用 export 导出多个变量

function sum(a, b) {
    return a + b
}

function multi(a, b) {
    return a * b
}
export {
    sum,
    multi
}

二、变量前使用 export 前缀

export function sum(a, b) {
    return a + b
}

export function multi(a, b) {
    return a * b
}

使用import 导入

import {sum,multi} from "@/utils/tool";
sum(2,4);//6

一个js 文件就是一个模块，多个模块内的变量名可能会重复，这时候可以给对应模块命名，这时候所有导出的值都会赋给这个变量

import * as A from '@/utils/tool'
A.sum(2,4)

import 是异步加载返回的是一个Promise 对象，可以在then 回调中得到所有导出值，

  import('@/utils/tool').then(res=>{
       let {sum, multi}=res
       console.log(sum(2,4));//6
   })

使用async/await

  async created() {
        let res=await  import('@/utils/tool')
        let {sum, multi}=res
        console.log(sum(2,4));//6

参考： 一篇文章帮你弄懂ES6模块化