526互联

CommonJS和ES6中的导入导出使用

发布时间 2023-03-28 17:49:42作者: 加利福尼亚的阳光

1.CommonJS

使用 exports

const name = '张三'

function Fn() {
  return 1
}

// 导出单个数据
exports.name = name 
exports.Fn = Fn

// 导入数据
// 可使用解构
const name = require('./导出.js')

console.log(name) // { name: '张三', Fn: [Function: Fn] }

使用 modules.export

const name = '张三'

function Fn() {
  return 1
}

// 导出 
modules.export = {
  name,
  Fn
}

// 导入 
const file = require('./导出.js')

console.log(file) // { name: '张三', Fn: [Function: Fn] }

ES6

使用 export （注意没有s）

// 导出单个
export const name = '张三'

// 导入 需要用到解构
// 使用 CommonJS 的 require 就发发现 导入进来的其实还是一个对象 其中包含 name 这个键
// 可使用 as 关键字 修改 导出名 import { name as changeName } from './导出.js'
import { name } from './导出.js'

使用 export default

同一个文件中 export default 只允许出现一次
导入时可以自由命名
也可以使用 as 关键字修改命名
import * as changeName from './导出.js'

const name = '张三'

function Fn() {
  return 1
}

// 导出的是一个对象 包含 name Fn 的键值
// 导入 可以使用解构 也可以使用 Object.name 的方式
export default {
  name,
  Fn
}

// 直接导出 name 
// 无法解构 直接导出 name 的值
export default name