Use import alias in JavaScript

If you have started learning javascript in recent years, or using some font-end frameworks / libraries like React then the use of import and export is very frequent. For those of you who are not aware of the ES6 new module syntax, you can distinguish and understand the difference between export by named and export default, but you can miss how to import using alias and how to use them. for efficiency in the project.

Basic summary of import and export

The Javascript module (as an example js my-module.js file) can export functions, objects, constants for external use. These are the basic conventions when working with javascript modules (code reuse, separation of concerns). In modules, we can export in 2 ways:

1. Use separate export for functions and objects.
2. Use export default for a function or object.

When a module needs to use functions and objetcs from another module, some of the following methods can be imported:

1. Import all exports into the current module: import * from "my-module.js"
2. Import some specific functions and objects: import { func1, obj2 } from "my-module.js"
3. Import function has default export: import func from "my-module.js"
4. Run the global code of the module but don’t import anything: import "my-module.js"
5. Import dynamic a module: import("my-module.js").then((module) => { //...do something })

Most developers, especially React developers, we often use to import a function by name and import by default. There are a few cases where you can use import all or dynamic import (I will have an explanation of these import ways).

Importing alias can effectively solve in some cases, instead of using the named defined in exporting module, you can use a different name defined in the module using that export.

Why is it important to use import alias?

In many cases we import functions from different modules but they export the same named. At that time javascript reported the following error:

One of the most common cases is that we import components from an external library.

For example. Using component library directly in the page-level of the normal project will not be recommended, as this will be difficult to update and maintain the component later. Instead we often create custom components to suit the project requirements as follows:

In the above example, we can see that the error cannot compile Card.js because the error declaration (there are 2 variables with the same name Card)

Use import alias to solve the problem

We will now use the alias import method to solve this problem, allowing us to import exporting module components with the same name.

When importing a named component from a module:

We can use alias with keyword as :

When importing a default export:

We can use alias directly:

With the above examples, we can use import alias to solve the error compile import Card of the original problem:

If the Button is exported by default, we can also use alias:

Conclude

Hope you effectively use import alias in your projects, in the next articles I will explain about import all and dynamic import, thank you everyone for watching!