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

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

簡(jiǎn)述

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

export 曝露

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

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

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

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

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

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

import 導(dǎo)入

再來(lái)看下import的寫(xiě)法,我們引入上面寫(xiě)export的文件xx.js

第一種寫(xiě)法

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

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

下面我們來(lái)看下babel編譯后的代碼:

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

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

第二種寫(xiě)法

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

這里還是引入xx.js,這種寫(xiě)法會(huì)把xx.js中曝露出來(lái)的屬性都賦值給xx這個(gè)變量（其實(shí)就是給module.exports起個(gè)別名）,被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);

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

第三種寫(xiě)法

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

在這種寫(xiě)法中oo是隨意的變量，乍一看可能會(huì)覺(jué)的和第二種寫(xiě)法一樣，其實(shí)不然，來(lái)看一下編譯后的代碼：

'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，多了一個(gè)default,這里的bar當(dāng)然就找不到了，所以這種用法不是用來(lái)引入export的屬性的，而是下面要說(shuō)的export default。

export default 曝露且一次性曝露

export與export default我會(huì)在別的文章總結(jié)，這里我們只說(shuō)export default的用法，下面來(lái)看代碼。

var foo=123;
export default foo;

被babel編譯后

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

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

export default 123;

export default {foo:123};

export default function f(){}

export default function (){}

上面的代碼是分開(kāi)寫(xiě)的，因?yàn)橐粋€(gè)js里面只能使用一次export default，理由和使用module.exports一樣，除了不能寫(xiě)多個(gè)，下面也是錯(cuò)誤的寫(xiě)法：

export default var foo=123; //錯(cuò)誤

export default還可以用來(lái)曝露class這里不多說(shuō)了，都是曝露。

其他的一些用法

繼承

這里說(shuō)是模塊繼承，其實(shí)就是一個(gè)父模塊引入子模塊，然后又將子模塊曝露出來(lái)的屬性曝露出去：

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屬性不向外曝露...這說(shuō)明,我們的引入的xx.js這個(gè)文件里面用exports default是無(wú)效的，替代寫(xiě)法是

export {default} from './xx';

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

引文件夾（引包）

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

import * as o from './oo'; //oo是個(gè)文件

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

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

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

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

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

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

廣告

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