commonjs規範和es6,commonjs和es6混用

本文目錄一覽：

• 1、CommonJS與ES6模塊化的具體使用方式
• 2、commonjs 與 ES6 模塊化
• 3、react+webpack 模塊化應該採用CommonJS規範還是ES6規範，為什麼

CommonJS與ES6模塊化的具體使用方式

所以：只需要將需要暴露給外部的變量或者方法 設置為exports的屬性 就行，

可以把exports看做一個全局對象，把所有暴露出來的函數和變量都存放在裡面

1.先寫個6.js文件

CommonJS規範規定，每個模塊內部，module變量代表當前模板，這個變量是一個對象，他的 exports 屬性（相當於 module.exports ）是對外的接口。 這裡詳情請看我的另一篇文章： module、exports 和 require的關係

加載某個模塊，其實是加載該模塊的module.exports屬性。require方法用於加載模塊

ES6模塊化的使用方法：（注！因為CommonJS類庫眾多，以及 CommonJS 和 ES6 之間的差異，所以無法直接兼容es6。）

直接/按需導出：可使用多個 用變量/常量的方式

導入：需要用按需導入 {解構} 的方式獲取

默認導出：只能使用一個 （default屬性只有es6才有）可以用引入對象定義多個屬性，但這樣在引入後調用的時候，更麻煩。

導入：優點：可以直接使用文件做接收參數且不用結構。

重命名export和import

如果導入的多個文件中，變量名字相同，即會產生命名衝突的問題，為了解決該問題，ES6為提供了重命名的方法，當你在導入名稱時可以這樣做：

如果想看CommonJS與ES6模塊化的原理 可以去看我另一篇文章

[秦圓圓]大佬寫的 require和import的區別

[大孩子氣]大佬寫的 require/exports、import/export 的區別

[七分sunshine!]大佬寫的# 前端模塊化工具 requireJs的使用;

commonjs 與 ES6 模塊化

一.commonjs 是什麼 

是作用於服務端應用程序,讓js程序具有模塊化功能的一種語法規範,執行方式是同步且運行時加載,

如何使用:

1.module.exports 導出

定義一個匿名對象,將需要導出的成員 賦值到這個匿名對象上,然後再賦值到module.exports 導出

2.exports 導出

exports在每個模塊中扮演着一個對象,如同每次在模塊中默認執行了let exports = module.exports,那麼exports如何使用導出功能呢,只要在exports對象上聲明一個要導出去的屬性名,將要導出的值賦值進去,

但不能直接賦值給exports對象,否則就和module.exports沒有關係,例如:exports=function fn() {},

導入時拿到的是一個undefind

3.require 導入

導入得到是一個對象,對象裡面是導出模塊所導出的成員,也可以同結構的方式按需導入

二.ES6模塊化

es6模塊化也是和commonjs一樣是具有將js模塊化功能的語法規範,不過只能用於在能識別es6語法瀏覽器環境,es6模塊由兩個命令構成:export, import; export 是向外提供輸出對外接口,import是使用其他模塊向內提供輸入接口

1.export

使用export 導出想要導出的值,可以是對象,變量,函數

聲明 的同時 且導出

將要導出的值賦值給對象的方式導出

那麼以exports導出的模塊該如何 導入到其他js文件呢?

1.2 導入模塊 語法 import

import 是提供接收對外導入的接口

格式: import 以結構的額方式使用大括號包起來,裡面填寫按需導入的成員,必須和必須和對應模塊導出的成員名一致,如果需要更改成員名,需要使用as關鍵詞, from 對接的模塊路徑

如果需要把一整個模塊的所有對象都導入成一個對象 使用 as 關鍵詞,自定義一個對象名

2.0 export default

同樣是和export一樣暴露指定的變量或者對象函數

但是導入到 其他模塊會稍微方便一些,可以不用像export 需要使用{}接收,直接使用一個自定義的對象名接收即可

commonjs與es6模塊化直接的差別

commonjs導出是值的拷貝,es6模塊化是導出的值的引用

commonjs加載是運行時加載,而es6模塊化是編譯時加載會比commonjs更加高效

react+webpack 模塊化應該採用CommonJS規範還是ES6規範，為什麼

研究react的時候也考慮過這個問題，首先可以先了解下這兩種模塊的機制。參考這裡

要考慮的點：

目前Commonjs是nodejs(瀏覽器環境需要模塊加載器)原生支持的，而es6需要藉助babeljs來實現。意味着如果要實現自動編譯上線(我司沒有在線上安裝node_modules做法)可能需要將babel之類的node_modules提交代碼倉庫，大概45M。

還有要考慮下你選擇的react的組件庫是基於es6還是Commonjs。如果你業務使用Commonjs規範，組件使用es6，這個就沒法統一了。

考慮下團隊對es6的熟悉程度，關係到代碼質量和維護成本。

暫時就想到這些。