export CommonJS AMD ES6

export

https://www.cnblogs.com/fayin/p/6831071.html

导入文件： a  -  b  -  c  ，对象隔代消失，可转成函数返回

 导入模块对象（命名）   import  * as defaulta from  './print'

 导出前 命名  var n = 1;     export {n as m};

 

default 为关键字 不可作为赋值
1. export
普通导出
type.js
 
export const a = 1
 
export const b = [1,2,3]
 
export function c(){...}
 
export const d = function (){...}
 
等价于
 
const a = 1
const b = [1,2,3]
 
function c(){...}
 
const d = function (){...}
 
export {a,b,c,d}
 
// 导出
 
import {a,b,a,d} from '@/utils/type'
 
2. export default
一个文件 一个 export default，存在多个时，只认第一个
export default后面不可以用 var、let、const 可用 export default function(){} function add(){}
export default function (name) {
    console.log(name)
}
// 导出
import file from '@/utils/type'
file(5)  //
 
3. export + export default
混合导出
 
export const fileType = function (name) {
    console.log(name)
}
 
export default function (name) {
    console.log(name)
}
 
// 导入
 
import * as fileType from '@/utils/type'
 
fileType.fileType ('aaa')    // aaa
 
fileType.default ('sss')    // sss
 
// 或者
 
import fileTypedefault,{ fileType } from '@/utils/type'
 
fileType ('aaa')    // aaa
 
fileTypedefault ('sss')    // sss
 
4.同时导入导出
a.js
export const fileType = function (name) {
    console.log(name)
}
 
export default function (name) {
    console.log(name)
}
 
b.js  导入 a.js  后，导出自己
import xxx,{fileType } from './a'       //  xxx   为default 别名
export {xxx,fileType}
 
5. as
export function sampleA (name) {
  console.log(name)
}
 
export function sampleB (name) {
  console.log(name)
}
 
export function sampleC (name) {
  console.log(name)
}
 
export default function (name) {
  console.log(name)
}
 
// 导出   多个使用别名
 
import {
  sampleA as funE,
  sampleB as funF,
  sampleC
} from '@/utils/type'
 
// 或者
 
import sample, {
  sampleA as funE,
  sampleB as funF
} from '@/utils/type'
 
funE('333')    //
 
funF('555')    //
 
sampleC('666')    //
 
sample('default') // default

其他细节

细节点一   default
export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
 
function add(x, y) {  return x * y;}
export {add as default};
// 等同于
// export default add;
 
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';
 
细节点二   export 复合导出 （ 转发 ）
export { foo, bar } from 'my_module';
写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，
导致当前模块不能直接使用foo和bar。
// 接口改名
export { foo as myFoo } from 'my_module';
// 整体输出
export * from 'my_module';
 
细节点三   默认接口、具名接口 转换
默认接口
export { default } from 'foo';
具名接口改为默认接口
export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;
默认接口也可以改名为具名接口
export { default as es6 } from './someModule';

CommonJS  AMD   ES6

CommonJS规范
同步模块化规范，适用于服务端 （Node使用CommonJS模块规范）
加载一次模块，后续使用缓存
module变量代表当前模块。
这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。
加载某个模块，其实是加载该模块的module.exports属性。
（ var exports = module.exports; 引用，故不能重新赋值，但可以改变属性，所有涉及模块地方生效  ）
module.exports.x = x;
 
require方法用于加载模块
var example = require('./example.js');
 
AMD
异步加载模块，适用于浏览器
define(['package/lib'], function(lib){
  function foo(){
    lib.log('hello world!');
  }
 
  return {
    foo: foo
  };
});
 
ES6
使用 export 和 import 来导出、导入模块
按需加载，只加载导入部分