javascript - What is 'import as'? - Stack Overflow

admin管理员组

文章数量:1327938

For example, in the following:

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

What is the relationship between Router, Route, Switch and BrowserRouter? Is this a form of destructuring?

If so, I thought destructuring was done using the following syntax:

  import React, { Fragment } from 'react'

  function App() {
    return (
      <Fragment>
       //...
      </Fragment>
    
    );
  }

For example, in the following:

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

What is the relationship between Router, Route, Switch and BrowserRouter? Is this a form of destructuring?

If so, I thought destructuring was done using the following syntax:

  import React, { Fragment } from 'react'

  function App() {
    return (
      <Fragment>
       //...
      </Fragment>
    
    );
  }

• javascript
• reactjs
• ecmascript-6
• import

Share Improve this question Follow edited Nov 2, 2020 at 23:39 kind user 41.9k88 gold badges6868 silver badges7878 bronze badges asked Nov 2, 2020 at 23:35 kennsorrkennsorr 32211 gold badge44 silver badges2222 bronze badges 2

• 2 You have really everything here: developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – kind user Commented Nov 2, 2020 at 23:40
• @Jayce444 that's really not helpful at all. I remember being confused by plenty of things that seem obvious in retrospect, now that I have knowledge that I didn't then. – Slbox Commented Nov 2, 2020 at 23:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It is very similar to destructuring, though not exactly the same thing. The as keyword is a special one for when you want to import a named export of a library under a different name. (See below for more on named exports)

---

So when a library developer exports functions or whatever from their library, they write something like:

export const someFunc = () => {};
export const someOtherFunc = () => {};
export const someThirdFunc = () => {};

These are called "named exports." They're what you're importing when you write something like

import { someFunc } from 'some-library';

So what as does it lets you import that named export under a new name you've chosen.

import { someFunc as somePreferredName, someOtherFunc as someOtherPreferredName, someThirdFunc } from 'some-library';

---

You can also import every named import into a single object like so:

import * as someLibrary from 'some-library';

Then you can do something like someLibrary.someFunc();

---

Or you can import the "default export." What exactly the default export contains is determined by the library's author, but usually the default export is equivalent to the syntax in the prior section of this answer.

So in the case of React, the two lines below are equivalent:

// import React from 'react';
import * as React from 'react'; // Imports every named export of 'react' and put it into an object named React.

---

Bringing it all together

It's important to note that React in particular requires you to import the default export. This is not an ES6 import thing, it's a React v16.x requirement. For other packages you can import just a piece and it will function as intended.

Lodash is an easier example. For Lodash, importing the default export is equivalent to importing everything.

// Import the named export "debounce" from 'lodash' into a variable of the same name
import { debounce } from 'lodash';



// Imports the named export "debounce" from 'lodash' into a variable of your chosen name
import { debounce as anyNameYouWant } from 'lodash' 



// Imports the default export of 'lodash' into the object named anyNameYouWant
import anyNameYouWant, { debounce } from 'lodash'; // And then additionally, imports debounce into a variable of the same name

Note that there is no 'as' keyword with default imports. They're not named exports, so when you import them, you're always choosing the name. That's what as allows you to do, but for named exports.

I'm not a Javascript expert by any means but I think that is calling for more than one module to be imported.

Example I found from https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/import :

import defaultExport from "module-name";

import * as name from "module-name";

import { export1 } from "module-name";

import { export1 as alias1 } from "module-name";

import { export1 , export2 } from "module-name";

import { foo , bar } from "module-name/path/to/specific/un-exported/file";

import { export1 , export2 as alias2 , [...] } from "module-name";

import defaultExport, { export1 [ , [...] ] } from "module-name";

import defaultExport, * as name from "module-name";

import "module-name";

var promise = import("module-name");

本文标签： javascriptWhat is 39import as39Stack Overflow