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)  // 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')    // 333
    
funF('555')    // 555
    
sampleC('666')    // 666
    
sample('default') // default

View Code

其他细节

细节点一   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';

View Code

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

View Code