CODEWITHSUNDEEP
javascriptimportmoduleexportes6-modules
Grecdev
Grecdev

Reputation: 959

ES6 Modules - 3 ways of importing files

Hello guys i have a little question about importing files into a single .js file.

Which way is better (best practice), what's the scenario that is used for:

  1. import './file;'

  2. import { something } from './file'

  3. import * as evertything from './file'

Because i see that 2 and 3 are the same thing but different syntax(maybe Syntactic Sugar).

Upvotes: 6

Views: 7630

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138257

All three do different things.

import './file;'

That loads the file, and does not import anything. This is useful if you want to initialize that module (or add some external dependency, e.g. a css file if you use Webpack).

import { something } from './file'

That just imports something from the file, therefore a bundler could optimize all other dependencies away. I'd always try to go with that instead of

import * as evertything from './file'

That imports everything from that module under a namespace, and therefore makes treeshaking more difficult (the bundler cannot optimize it well). I'd only use that if you need everything from that dependency, or if that dependency is loaded externally nevertheless (e.g. import * as React from "react").

Upvotes: 16

Krushi Raj
Krushi Raj

Reputation: 538

I guess the following MDN documentation will make you clear about those things:

import - JavaScript|MDN

As far as I know, 1st method is used when you have only one default export. 2nd is used when you have multiple default exports but you don't want all of them to load and want only few of them. 3rd is the case when you want everything under a single object (which can be used similar to namespace in other programming languages).

Upvotes: 0

Related Questions