require與import

 require 和 import，都是爲了JS模塊化使用。最近項目中，由於多人協同開發，出現了一個項目中同時使用了require 和 import 引入依賴的狀況。正常狀況下，一個項目中最好是對引入方式作一個規範。下面咱們就來看一下require 和 import的區別：

一.require
  require是Commonjs的規範，node應用是由模塊組成的，聽從commonjs的規範。用法：

 

 a.js function test (args) { // body...
console.log(args); } module.exports = { test }; b.js let { test } = require('./a.js'); test('this is a test.');

    require的核心概念：在導出的文件中定義module.exports，導出的對象類型不予限定（可爲任意類型）。在導入的文件中使用require()引入便可使用。本質上，是將要導出的對象，賦值給module這個對象的exports屬性，在其餘文件中經過require這個方法來訪問exports這個屬性。上面b.js中，require(./a.js) = exports 這個對象，而後使用es6取值方式從exports對象中取出test的值。

二.import
import是es6爲js模塊化提出的新的語法，import （導入）要與export（導出）結合使用。用法：

a.js: export function test (args) { // body...
console.log(args); } // 默認導出模塊，一個文件中只能定義一個
export default function() {...}; export const name = "lyn"; b.js: // _表明引入的export default的內容
import _, { test, name } from './a.js'; test(`my name is ${name}`);

 

3、commonjs模塊與ES6模塊的區別
    1.commonjs輸出的，是一個值的拷貝，而es6輸出的是值的引用；

    2.commonjs是運行時加載，es6是編譯時輸出接口；

 

 

文章目錄 概念 1、ES6模塊化的使用 1、es6中的export 2、es6中的import 2、CommonJs規範的使用 1、CommonJs中的exports 2、CommonJs中的require 3、CommonJs規範與ES6中import的區別 1、引入模塊的不一樣點 2、引入模塊的性能不一樣點 3、暴露模塊的不一樣點 4、在nodeJs中怎麼使用 概念 CommonJs是一種模塊化規範，在ES6以前的，用於服務器端nodeJs和瀏覽器端。 ES6標準發佈後，模塊化標準是以export指令導出接口，以import引入模塊。 可是在node模塊中，咱們依舊不少地方採用的是CommonJS規範 即：使用module.exports導出接口，使用require引入模塊。 這兩種方式咱們或多或少都有用過，只是不瞭解這是2種不一樣的規範 1、ES6模塊化的使用 es6中模塊化靠export { }暴露導出模塊，靠import ... from '...'引入模塊 1、es6中的export 模塊js使用export命令輸出變量 注意：這裏輸出的必須是變量，而不能是值(包括方法) 注意：export命令不須要=，只要後面跟一個變量便可 正確示例： // 直接暴露
export var test = 'Michael'; // 設置變量暴露
var test = 'Michael'; export { test } 錯誤示例： // 直接暴露
export 1;    //報錯 // 設置變量暴露

var test = 1; export test; //報錯
 以上錯誤的緣由，是由於export命令後面不是變量而是一個值，即便是賦值給了test，它也是一個值(方法同理)。 正確用法中是把值包在了對象裏{ test } 2、es6中的import 目標文件，使用import ... form '...'引入模塊(前提是暴露模塊正確) import命令引入沒什麼坑，主要延伸是結合ES6的解構賦值 普通引入示例 import fs from 'fs'        //引入整個fs模塊

var test = fs.star(....)    //調用fs模塊中的star方法
 解構引入示例 import { stat,readFile } from 'fs'        //引入fs模塊中的stat,readFile方法，其他不引入

var test = star(....)    //調用fs模塊中的star方法
 2、CommonJs規範的使用 CommonJs規範靠exports.xx = xx或module.exports = { xx }暴露導出模塊。 靠var xx = require('...')或var { stat, exists, readFile } = require('fs');引入模塊 1、CommonJs中的exports 注意：這裏的exports不是一個命令 注意：這裏的exports是有s的，且後面須要使用=，這裏個人理解，exports自身是變量，引入就是依靠這個變量進行的 使用exports示例 var test = 1; exports.test = test;  使用module.exports示例 var test = 1; module.exports = { test } 
2、CommonJs中的require 導入也沒什麼坑，一樣可使用解構 普通引入示例 var fs = require('fs')        //引入整個fs模塊

var test = fs.star(....)    //調用fs模塊中的star方法
 解構引入示例 var { stat,readFile } = require('fs')        //引入fs模塊中的stat,readFile方法，其他不引入

var test = star(....)    //調用fs模塊中的star方法
 3、CommonJs規範與ES6中import的區別 1、引入模塊的不一樣點 require('xx')能夠直接做爲一個對象,也就是能夠直接當成變量來使用，不賦值。如：require('xx').star(...) 而es6的import ... form ...是固定寫法，不能操做 2、引入模塊的性能不一樣點 CommonJs規範的引入require('xx')是「運行時加載」 而es6的import ... form ...是按需引入，編譯過程按照import命令來選擇編譯 3、暴露模塊的不一樣點 在上面使用介紹，暴露模塊的區別已經很明顯了: es6的export命令不用=暴露一個變量（通常爲對象） CommonJs的exports.xx=xx，是依靠exports變量自身來暴露的 4、在nodeJs中怎麼使用 咱們都知道es6是絕對通用的規範，且會更新到es七、es8等。而既然es6有模塊化的方法，那麼CommonJs規範將逐步被替換。 可是如今而言，import、export等不少es6命令，還須要依靠編譯成es5來實現。 好比在vue-cli當中，es6的使用就須要依賴webpack的babel進行編譯成es5。 因此在nodeJs中若是不引入babel或其餘方法來編譯es5的話，依舊須要老老實實使用CommonJs規範。 ndoeJs使用es6import、export命令的解決方法，能夠看阮一峯老師的ECMAScript6，.mjs後綴文件名 本文參考阮一峯老師的ECMAScript6 與一些關於js編譯與運行的博客

 

 

 

.