ES6,commonJS模块化的导入导出

在这里插入图片描述
文件是独立的模块,就相当于每个模块有自己的房间
这个时候我们bbb.js希望可以用到aaa.js中的数据;这个时候就可以在aaa.js中导出bbb.js需要的数据
在bbb.js中去接收

es6:

export命名导出

export 可以导出多个命名模块

//在aaa.js中导出
export {
    Aname
}
//or
export function addnum(a,b){
  return  a+b
}
//bbb.js导入
import {Aname,addnum} from "./aaa.js";
addnum(2,3)
export default

导入者自定义名字;只能导出一个默认模块,这个模块可以匿名

export default function (data){
  console.log(data)
}
import myfn from "./aaa.js"
myfn("hihi")

import全部导入
import * as aaa from "./aaa.js"
aaa.Aname  //引用

commonJS:

==这是基于nodejs使用的导出方式,==没有nodejs的支撑是无法使用的!

module.exports= {} 导出
//一个一个 导出
module.exports.age = 1
module.exports.foo = function(){}
exports.a = 'hello'

//整体导出
module.exports = { age: 1, a: 'hello', foo:function(){} }

require导入
const foo = require('./foo.js')
console.log(foo.age) //1

值得注意的是,在非nodejs下是无法使用的
先简单说一下各个环境的 ES6 module 支持 CommonJs 情况,后面单独说如何在不同环境中使用

因为 module.exports 很像 export default 所以 ES6模块 可以很方便兼容 CommonJs
在ES6 module中使用CommonJs规范,根据各个环境,打包工具不同也是不一样的

我们现在大多使用的是 webpack 进行项目构建打包,因为现在前端开发环境都是在 Node 环境原因,而 npm 的包都是 CommonJs 规范的,所以 webpack 对ES6模块进行扩展 支持 CommonJs,并支持node的导入npm包的规范

如果你使用 rollup,想在ES Module中支持Commonjs规范就需要下载rollup-plugin-commonjs插件,想要导入node_modules下的包也需要rollup-plugin-node-resolve插件

如果你使用 node,可以在 .mjs 文件使用 ES6,也支持 CommonJs 查看 nodejs es-modules.md

在浏览器环境 不支持CommonJs
更多相关详讲区别看这里

你可能感兴趣的:(项目总结)