這兩種導入javascript模塊的方法有什麼區別？

Question

我是javascript開發新手。我使用npm。

我想產生一些UUID的，所以我找到了一個UUID包：
https://www.npmjs.com/package/uuid

我安裝了它運行 npm install uuid

現在，我想在我的代碼使用這個包。

我發現有兩種方法可以做到這一點。故宮文檔提示：

// Generate a v4 UUID (random) 
const uuidV4 = require('uuid/v4'); 
uuidV4(); // -> '110ec58a-a0f2-4ac4-8393-c866d813b8d1' 

但我猜我也能做到（這似乎工作）：

import uuid from 'uuid'; 
console.info(uuid.v4()); 

我的問題：

• 這些是什麼區別？
• 我怎麼知道模塊的輸出是什麼，所以我知道我可以導入什麼路徑？例如，我似乎也可以做import v4 from 'uuid' ......但我並不真正瞭解這是如何工作的。

Answer 1

require是在項目中包含模塊的es5方法。

導入是在項目中包含模塊的es6方法。

如果您需要支持舊版瀏覽器並希望使用es6功能，則需要使用諸如Babel之類的轉發器將您的代碼轉換爲es5格式。

通過導入，您可以取模塊。如果你嘗試

// test.js 
export default() => { console.log("Hi, I'm a default export"); } 

export NotDefault =() => { console.log("I am not the default export"); } 

現在：讓我們用這個作爲一個例子

import NotDefault from "test.js"; 

你實際上不會導入NotDefault，你會導入默認出口。

要導入NotDefault，你可以使用以下格式：

import { NotDefault } from "test.js"; 

ES5語法

module.exports = function() { 
    // this is now the default export of this file. 
    // you can use this file in another by typing var MyVar = require("module_name"); 
} 

exports.MyFunc = function() { 
    // this is also exported from this file 
    // you can use this by var MyVar = require("module_name").myFunc; 
} 

ES6語法

default export function() { 
    // this is the default export of this file 
    // use can use me by typing import MyVar from "module_name"; 
} 

export const MyFunc = function() { 
    // this is also exported and can be used by typing 
    // import { MyFunc } from "module_name"; 
} 

我希望這有助於！