`require`和`import`的區(qū)別

起源

es6誕生之前，js一直沒有模塊系統(tǒng)，就連css都有@import，對(duì)現(xiàn)在復(fù)雜的大型項(xiàng)目開發(fā)無疑是一種阻礙。es6在2015年6月正式發(fā)布，所以es6也有一個(gè)別稱es2015。官方?jīng)]有提出es6之前，社區(qū)給出了解決模塊問題的方案，那就是node.js。介紹到這個(gè)地方，其實(shí)require和import的起源已經(jīng)出現(xiàn)了，es6中模塊解決方案使用的關(guān)鍵字是import，而node.js提供的解決方案使用的關(guān)鍵字是require。

node.js由Ryan Dahl在2009年發(fā)布。node.js提供的模塊化也叫CommonJS，不過node.js主要用于服務(wù)端的開發(fā)，但是隨著時(shí)代的發(fā)展，現(xiàn)在的一些前端框架也依賴node.js

導(dǎo)出命令/引入命令

要想使用require或者import，首先得知道使用這兩種方式對(duì)應(yīng)的導(dǎo)出方式是怎樣的，從現(xiàn)在開始，下文分別以CommonJS和es6來區(qū)分兩種解決方案。

CommonJS

導(dǎo)出變量，方法，對(duì)象

// testcommonjs.jsexports.a = 123;exports.b = 'hello';exports.c = function(){  console.log('ccc')}exports.d = {  foo: 'bar'}//等價(jià)=> module.exports.a = 123;module.exports.b = 'hello';//等價(jià)=> module.exports = {  a:123,  b:'hello',  c:function(){    console.log('ccc')  },  d:{    foo：bar  }}

建議使用module.exports，單獨(dú)使用exports在某些情況下會(huì)產(chǎn)生意想不到的錯(cuò)誤，這不是本文討論的重點(diǎn)

引入和使用

//index.jsvar test = require('./testcommonjs')console.log(test.a)console.log(test.b)test.c()console.log(test.d.foo)

es6

導(dǎo)出變量，方法，對(duì)象（這里只列舉常用的一些方法，具體的使用方法請(qǐng)參考阮一峰e(cuò)s6入門）

//testesmodule.jsexport var a = 123export var b = 'hello'export function c(){  console.log('ccc')}export var d = {  foo: 'bar'}

引入和使用

import { a,b,c,d } from './testesmodule'console.log(a)console.log(b)c()console.log(d.foo)//等價(jià)=> import * as test form './testesmodule'console.log(test.a)console.log(test.b)test.c()console.log(test.d.foo)

靜態(tài)優(yōu)化

這是從阮一峰大神的文檔中學(xué)習(xí)到的一個(gè)概念。他在文檔中以node的核心模塊fs舉了一個(gè)例子

es6

// ES6模塊import { stat, exists, readFile } from 'fs';

注：不要試圖在沒有配置babel的項(xiàng)目中去測(cè)試上面的代碼，因?yàn)閚ode到目前為止依然不支持es6的模塊化語法（筆者目前的node版本：v10.15.0），盡管它已經(jīng)實(shí)現(xiàn)了絕大部分的es6特性。

CommonJS

// CommonJS模塊let { stat, exists, readFile } = require('fs');

這樣看起來，fs模塊的引入方式在es6中和CommonJS中似乎只是語法上的區(qū)別，但是實(shí)際上，在CommonJS中上述代碼的處理方式是這樣的

let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;

也就是說，為了使用fs中的stat、exists、readFile方法，在代碼執(zhí)行使必須把fs整個(gè)模塊全部加載進(jìn)來，生成一個(gè)對(duì)象_fs，然后再從這個(gè)對(duì)象上面讀取3個(gè)方法，這種加載被稱為“運(yùn)行時(shí)加載”，因?yàn)橹挥羞\(yùn)行時(shí)才能得到這個(gè)對(duì)象。

而es6模塊的設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量，從這個(gè)角度上來看，es6的模塊化效率要比CommonJS高得多。阮一峰大神在文檔中還列舉了一些靜態(tài)加載的其他優(yōu)點(diǎn)，但是本菜b并不能看懂╮(╯▽╰)╭