commonJS與es6規範的引入導出

這次帶給大家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 指向当前模块
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

webpack3.x的entry,output,module解析

Vue2 tab切換選項卡的方法

#

以上是commonJS與es6規範的引入導出的詳細內容。更多資訊請關注PHP中文網其他相關文章！