多种import export导入导出傻傻分不清楚？

1.常用模块化方案

JS大爆发时代，模块化方案社区有很多种例如AMD CMD CommonJs等等。直到官方推出ES6 Module模块化。所以我们一般情况下都是用ES6 Module模块化，只有nodejs里面常用的是 CommonJs。下面来介绍几种常用的导入导出方式。

2.ES6 Module

1.export导出

 // a.js
1.直接导出export xx  
  export var name = 2022
  export var age = 18
  export function sayHello(x)
  {
      return 'hello' + x
  }
	

2.先申明,再使用大括号方式导出
  var year = 18	
  var age = 18 
  function sayHello(x)
  {
      return 'hello' + x
  }
  export { year, age, sayHello }

//b.js
// 这两种导出对应的导入为花括号导入
import { age } from './a.js'

2.export default

//使用 export default 导出整个对象
export default {
    year: 2022,
    age: 18
}

//使用 export default 导入
import moduleC from './c.js' //我们可以自定义模块名
import * as moduleC from './c.js'//  也可以使用别名

3.import()函数动态导入模块

import() 是 ES6 中用于在动态环境中导入模块的函数，
它是在运行时执行的，而不是在代码加载阶段执行。（就是用的时候再导出,vue路由里面会常用按需引入）
import(moduleName)
  .then((module) => {
    // 使用模块中的内容
  })
  .catch((error) => {
    // 处理错误
  });
  
  
  //路由常用
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

CommonJS

对于CommonJS 我们一般使用module.export导出 使用require 获取
//e.js 导出
module.exports = {
	year: 2022,
  age: 25
}
// g.js 导入
var person = require('./e.js')

CommonJS使用require.ensure 动态导入
require.ensure(
   dependencies: String[],
   callback: function(require),
   errorCallback: function(error),
   chunkName: String
)
dependencies：字符串构成的数组，会将其对应的文件拆分到一个单独的 bundle 中，此 bundle 会被异步加载
callback：webpack 会执行此函数，使用 require() 来加载依赖，函数体可以使用此参数，来进一步执行 require() 模块
errorCallback：当 webpack 加载依赖失败时，会执行此函数
chunkName：由 require.ensure() 创建出的 chunk 的名字，打包后会将其存放到此路径下

这一段参考了老豆腐 链接：juejin.cn/post/713250…
我是个小菜鸡这是我第一次写文章，感觉很多地方不知道怎么表达，很佩服那些能写出高质量文章的人，就当记笔记慢慢锻炼吧，有不对的地方欢迎指正。