commonJS与es6规范的引入导出

时间:2018-03-10 14:05:53 来源:互联网 作者: 神秘的大神 字体:

这次给大家带来commonJS与es6规范的引入导出,commonJS与es6规范的引入导出的注意事项有哪些,下面就是实战案例,一起来看一下。

index.js中定义:

var info = { name = 'sisi' };

1.定义变量的时候,不要用object变量名,有可能出现未知的错误。

2.输出用export {info}的时候,引入须用 import {info} from index.js 的形式,不可省略大括号。

3.输出用export{info as vm}的形式时,引入不能再用info这个接口了,只能用vm这个接口,即

import {vm} from index.js

4.重点:输出采用module.exports = info的时候,引入info也可以采用import.

import info from index.js

不可采用

import {info} from index.js

当然,这种情况使用require;也是正确的

var info = require('index.js');

5.与上面第四条作对比,如果输出采用es6的export 。即 export {info} ; 或者 export default info;则模块引入info必须采用import,采用require行不通。

6.使用export输出的时候,引入必须要有{},例如demo.js

export const str = 'sisi';
export function func(){
   console.log('sisi');
}

引入的时候要用:

import {str} from 'demo'; 或 import {str, func} from 'demo';

不可使用

export default const str = 'sisi';

但是使用

export default const str = 'sisi';

输出的时候引入可以使用

import str from 'demo';

因为一个文件或者模块中只能有一个export default

es6 {
  export   :      '可以输出多个,输出方式为 {}' ,
  export  default : ' 只能输出一个 ,可以与export 同时输出,但是不建议这么做',
  解析阶段确定对外输出的接口,解析阶段生成接口,
  模块不是对象,加载的不是对象,
  可以单独加载其中的某个接口(方法),
  静态分析,动态引用,输出的是值的引用,值改变,引用也改变,即原来模块中的值改变则该加载的值也改变,
  this 指向undefined
}
commonJS {
  module.exports =  ...   :      '只能输出一个,且后面的会覆盖上面的' ,
  exports. ...  : ' 可以输出多个',
  运行阶段确定接口,运行时才会加载模块,
  模块是对象,加载的是该对象,
  加载的是整个模块,即将所有的接口全部加载进来,
  输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,
  this 指向当前模块
}

相信看了本文案例你已经掌握了方法,更多精彩请关注我要学编程网wyxbc.com其它相关文章!

相关阅读:

webpack3.x的entry,output,module解析

Vue2 tab切换选项卡的方法

以上就是commonJS与es6规范的引入导出的详细内容,更多请关注我要学编程网wyxbc.com其它相关文章!