如何在node.js中使用import與export-創(chuàng)新互聯(lián)

如何在node.js中使用import與export？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，創(chuàng)新互聯(lián)公司面向各種領域：成都廣告推廣等成都網(wǎng)站設計、網(wǎng)絡營銷推廣解決方案、網(wǎng)站設計等建站排名服務。

簡述

import與export是es6中模塊化的導入與導出，node.js現(xiàn)階段不支持，需要通過babel進行編譯，使其變成node.js的模塊化代碼。（關于node.js模塊，可參考其他node.js模塊化的文章）

export 曝露

使用export可以曝露出方法、對象、字符串等等，如下代碼

//寫法1
export var foo=function(){
  console.log(1);
}
//寫法2
var bar ={a:"1",b:2};
export {bar};
//寫法3
var baz='hello world';
export {baz as qux};

那么，上面的代碼經(jīng)過babel的編譯后，變成可以執(zhí)行的node.js代碼，如下

"use strict";
//標記這個模塊是es的模塊
Object.defineProperty(exports, "__esModule", {
  value: true
});
//寫法1
var foo = exports.foo = function foo() {
  console.log(1);
};
//寫法2
var bar = { a: "1", b: 2 };
exports.bar = bar;
//寫法3

var baz = 'hello world';
exports.qux = baz;

看到上面的代碼我們知道了，es6的export會被轉成node.js中的exports的曝露方式。

import 導入

再來看下import的寫法,我們引入上面寫export的文件xx.js

第一種寫法

import {foo,qux} from './xx';
console.log(qux);

foo,qux是在xx.js中我們曝露出來的屬性,在xx.js中曝露出來的屬性有foo、bar、qux3個，由此可知這種寫法需要知道引入文件中曝露出來的屬性的名稱，并且可以按需要寫，不需要枚舉全部屬性。

下面我們來看下babel編譯后的代碼:

'use strict';
var _ = require('./xx');
console.log(_.qux);

就是一個簡單的require方法，引入xx.js，所以用這種方式我們是可以引入es6的模塊也可以引入node.js模塊的。

第二種寫法

import * as xx from './xx';
console.log(xx.bar);

這里還是引入xx.js,這種寫法會把xx.js中曝露出來的屬性都賦值給xx這個變量（其實就是給module.exports起個別名）,被babel編譯后如下下：

'use strict';
var _ = require('./xx');
var xx = _interopRequireWildcard(_);
function _interopRequireWildcard(obj) {
  //判斷是node模塊還是es模塊
  if (obj && obj.__esModule) {
    return obj;
  }
  else {
    var newObj = {};
    if (obj != null) {
      for (var key in obj) { 
        if (Object.prototype.hasOwnProperty.call(obj, key)) 
         newObj[key] = obj[key];
      }
    }
  //兼容舊的babel編譯
    newObj.default = obj;
    console.log(newObj);
    return newObj;
  }
}
console.log(xx.bar);

看到上面的代碼，有一個判斷是node模塊還是es模塊，這種寫法也是兼容es模塊和node的模塊的。

第三種寫法

import oo from './xx'
console.log(oo.bar);

在這種寫法中oo是隨意的變量，乍一看可能會覺的和第二種寫法一樣，其實不然，來看一下編譯后的代碼：

'use strict';
var _ = require('./xx');
var _2 = _interopRequireDefault(_);
function _interopRequireDefault(obj) { 
 return obj && obj.__esModule ? obj : 
 { default: obj }; 
}
console.log(_2.default.bar);

在最后一行，oo.bar被編譯成了_2.default.bar，多了一個default,這里的bar當然就找不到了，所以這種用法不是用來引入export的屬性的，而是下面要說的export default。

export default 曝露且一次性曝露

export與export default我會在別的文章總結，這里我們只說export default的用法，下面來看代碼。

var foo=123;
export default foo;

被babel編譯后

"use strict";
Object.defineProperty(exports, "__esModule", {
 value: true
});
var foo = 123;
exports.default = foo;

看到最后一行foo會被賦給exports.default，這樣正好對應上了import oo from './xx'這種寫法里面會調用default里面的屬性，所以這兩種用法對應使用。既然屬性的值是會賦給exports.default，那么就可以有下面的用法

export default 123;
export default {foo:123};
export default function f(){}
export default function (){}

上面的代碼是分開寫的，因為一個js里面只能使用一次export default，理由和使用module.exports一樣，除了不能寫多個，下面也是錯誤的寫法：

export default var foo=123; //錯誤

export default還可以用來曝露class這里不多說了，都是曝露。

其他的一些用法

繼承

這里說是模塊繼承，其實就是一個父模塊引入子模塊，然后又將子模塊曝露出來的屬性曝露出去：

export * from './xx';

被編譯后

'use strict';
Object.defineProperty(exports, "__esModule", {
 value: true
});
var _ = require('./xx');
Object.keys(_).forEach(function (key) {
 if (key === "default" || key === "__esModule") return;
 Object.defineProperty(exports, key, {
  enumerable: true,
  get: function get() {
   return _[key];
  }
 });
});

注意下面這句

if (key === "default" || key === "__esModule") return;

default屬性不向外曝露...這說明,我們的引入的xx.js這個文件里面用exports default是無效的，替代寫法是

export {default} from './xx';

繼承的寫法常用于組織多個模塊，經(jīng)常與下面要說的引包一起用

引文件夾（引包）

很多人不理解下面這行代碼

import * as o from './oo'; //oo是個文件

為什么import可以引入文件夾，注意不是什么文件夾都可以,里面至少有一個文件就是index.js或者有package.json和另外名字的js，因為文件夾里面有index.js那么這就不是一個文件夾而是node.js的包了（更多參見node.js包的文章），import會被babel編譯成require，require可以去引用指定路徑的包，因此，import可以去導入一個文件夾，我們可以依賴index.js將文件夾中的其他文件代碼導出,例如：

如何在node.js中使用import與export

//index.js
export * from './1';
export * from './2';

看完上述內容，你們掌握如何在node.js中使用import與export的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站欄目：如何在node.js中使用import與export-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article32/dgidsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、靜態(tài)網(wǎng)站、網(wǎng)站維護、網(wǎng)站設計、品牌網(wǎng)站設計、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名