首頁 > web前端 > js教程 > import與export在node.js中的使用方法

import與export在node.js中的使用方法

小云云
發布: 2018-01-30 09:47:22
原創
1848 人瀏覽過

import與export是es6中模組化的導入與導出,node.js現階段不支持,需要透過babel進行編譯,使其變成node.js的模組化程式碼。 (關於node.js模組,可參考其他node.js模組化的文章)本文主要介紹import與export在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};
登入後複製

那麼,上面的程式碼經過babel的編譯後,變成可以執行的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';
登入後複製

繼承的寫法常用於組織多個模組,經常與下面要說的引包一起用

引資料夾(引包)

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

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將資料夾中的其他文件代碼導出,例如:


//index.js
export * from './1';
export * from './2';
登入後複製

我們可以透過import oo這個資料夾得到1.js、2.js裡面曝露出的屬性。

總結

#

從看babel編譯後的程式碼,可以看出export與exports,module.exports與export default的用法的相似,至於用什麼怎麼用還是看個人喜好吧。

相關推薦:

「詳解JavaScript ES6中export import與export default的用法與差異

#

以上是import與export在node.js中的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板