導入模塊時'as'是什么意思？

Question

導入多個東西時意味着什么？ 例如，

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

這只是來自react路由器的一個例子，javascript文檔僅顯示'as'之后的一個聲明的示例

看起來它將BrowserRouter導入為路由器，路由和鏈接，因此所有三個變量都引用相同的庫。 如果我是對的，你為什么要這么做？

因此它與var Router, Route, Link = require('react-router-dom').BrowserRouter(); ？

Answer 1

該聲明

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

有選擇地從react-router-dom導入BrowserRouter ， Route和Link 。 as Router語句使BrowserRouter在名稱Router （而不是BrowserRouter ）下可用。 Route和Link的名稱不會更改。

它相當於：

const Router = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;

Answer 2

不，不是那樣的！ 這是一個添加到導入/導出功能的和聲功能。

它與此相同：

let tmp = require("react-router-dom")
let Router = tmp.BrowserRouter
let Route = tmp.Route
let Link = tmp.Link

或者干脆：

const {BrowserRouter: Router, Route, Link} = require("react-router-dom")

Answer 3

關鍵字as在一個import語句可以讓你重新命名要導入的模塊。 它將等同於以下內容：

let Router = require("react-router-dom").BrowserRouter
let Route = require("react-router-dom").Route
let Link = require("react-router-dom").Link

Answer 4

導入是ES6的新語法，在您的示例中，它從模塊'react-router-dom'加載三個類，BrowserRouter的名稱太長，因此您可以使用別名，稱為路由器。

從“module-name”導入{member1，member2 as alias2，[...]};

commonJS等效語法將是：

var Router = require('react-router-dom').BrowserRouter,
    Route = require('react-router-dom').Route,
    Link = require('react-router-dom').Link;

我在下面附上了一個鏈接：你會找到更多細節。

導入語法文檔