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 来导出、导入模块
按需加载，只加载导入部分