For object const a = {b: 1, c: 2, d: 3}, we can do destructuring like this: const {b, ...rest} = a.
I'm wondering if it's also possible for imports.
Say I have a file file1.js:
// file1.js
export const a = 1;
export const b = 2;
export const c = 3;
Can I import from this file by importing one and the rest like destructuring?
// file2.js
import {a, ...rest} from "file1";
Not directly, there's no import form for it.
What you can do instead is import the module's module namespace object, then use destructuring on it:
import * as file1 from "file1";
const {a, ...rest} = file1;
FWIW, the specification has an example list of import forms here. It doesn't show what you can and can't combine, but those are the basic forms.
Related
why webpack pack the unuse value to the output file?
// ------ common.js ----
const a=3;
const b=4;
export {a,b}
//--------------------------
//------------ index.js--------
import {a} from "common"
console.log(a)
after the webpack process ;
the output file still include the const b=4;
how can i pack the source just include the import module?
use
export const a = 3;
export const b = 4;
instead of
const a=3;
const b=4;
export {a,b}
Is it possible to create a dynamic const name of an array using dropdown options?
Import {array1, array2, array3} from './myfilesystem/arrays';
const somename = array1;
You need to:
Put your arrays in a keyed object.
Put the keys in the drop-down.
Put the selected key in a variable.
Use the value of that variable to look up the array in the object.
Like this:
const arrays = {
array1: [...],
array2: [...],
array3: [...]
}
const optionsForDropdown = Object.keys(arrays) // ["array1", "array2",...]
function returnSelectedArray(selectedKey) {
return arrays[selectedKey]
}
So if you call returnSelectedArray("array1") or you do:
const key = "array1"
returnSelectedArray(key)
you will get arrays.array1 back.
import * as arr from '..pathname'
// ..and somewhere in your code..
const someArray = arr.array1
is that what u ment?
imports/exports :
exporting from a file, has many syntax variants
// explicit exports
export const PI = 3.14159
export const cylinderVolume = (r, h) => {....}
//export as an object..
const PI = 3.14159
const cylinderVolume = (r, h) => {....}
export { PI, cylinderVolume }
// default export
export default PI = 3.14159
export const cylinderVolume = (r, h) => {....}
imports
// importing explict exports
import { PI, cylinderVolume } from 'path'
//importing default and explict exports(PI is default and cylinderVolume is explict)
import PI, { cylinderVolume } from 'path'
// importing as whole..
import * as shape from 'path'
// useage..
const cylinderSurfaceArea = (r, h) => 2*shape.PI*r ( r + h )
Re-export from another file..
export { cylinderVolume } from 'path'
// re-exporting as default..
export { default as PI } from 'path'
comparing some impacts on size on usecases:
import _ from 'lodash' // use case..
import * as shape from 'path' // same effect..
this will import the entire module and has a huge effect on the project size. however if we are using libs like lodash this is the way they recommend.
import { get, has } from 'lodash'
import { PI, cylinderVolume } from 'path'
surprisingly this don't have any much size diffrence comparing with the above syntax.
Tree Shaking
Modern build tools (webpack and others) bundle modules together and optimize them to speedup loading and remove unused stuff.
so, in order to minimize the impact on size the recommended syntax would be
import get from 'lodash/get'
but still when we have to import a whole load of stuff it's not practical(or recommended/ideal for the sake of readability)..
Is it possible to achieve same functionality as:
module.exports = {
a: 1,
b: 2
}
...which later allows:
import { a } from 'path/to/module'
by using ES6 modules like (or export default):
export const moduleName = {
a: 1,
b: 2
}
so that later rather than importing whole module into other one, only part of it will be imported
Use named exports instead:
export const a = 1;
export const b = 2;
Note that although this allows the consumer to do something like import { a } from ..., you're now not actually destructuring an object with an a property there, like you were doing originally with the module.exports syntax, you're just extracting the named export.
You can still export a default object in addition to using named exports, if you wanted:
export default { c: 'c', d: 'd' }
and then you can import with
import obj from '...';
const { c } = obj;
This question already has answers here:
ES6: import specific values with namespace
(2 answers)
Closed 5 years ago.
Currently, I have code like:
import { actionA, actionB, actionC } from './someModule'
doStuff({actionA, actionB, actionC})
You can see, there is a duplication in listing the actions, and this is my concern, I want to avoid duplication when listing actions. So I would want something like this:
import { actionA, actionB, actionC } as actions from './someModule'
doStuff(actions)
// someModule.js looks like:
export const actionA = ...
export const actionB = ...
export const actionC = ...
export const actionD = ...
... and so on
I don't need them all because there could be much more to import which is not relevant to current job
UPDATE
I explained the same topic in this post. Same as below.
As per MDN documentation, you can either set an alias on entire module contents such as * as constants or a single content such as b as constants. But you can't set an alias on specific contents. So one of the solutions would be using *.
import * as constants from './module1';
Another possible solution would be passing { a, c } as default.
//module1.js
export const a = ...
export const b = ...
export const c = ...
export const d = ...
export default { a, b, c };
/module2.js
import contants from './someModule';
doStuff(constatns);
Lastly, If you don't want to pass these constants as default, you can create an object and pass that object.
//module1.js
export const a = ...
export const b = ...
export const c = ...
export const b = ...
export const myCustomConstants = { a, c };
//module2.js
import { myCustomConstants } from './someModule';
doStuff(myCustomConstants);
I have a file that default exports an object containing constants. I'd also like to export each of the properties of the object. Is there a way to do this that doesn't involve writing them all out?
import keyMirror from 'keymirror';
// keymirror outputs an object with key = val. eg. {a: a, b: b, ...}
const types = keyMirror({
FREEFORM: null,
GRAPH_IMAGE: null,
...
});
export default types;
export const FREEFORM = types.FREEFORM;
export const GRAPH_IMAGE = types.GRAPH_IMAGE;
...
Not sure about export, though you can use a single destructuring assignment
const {FREEFORM, GRAPH_IMAGE, ..} = types;