Is it possible to import specific symbols from a ES6 javascript module, but still into a namespace? I'm looking for a combination of: import * as d3 from 'd3' which puts imported symbols into the d3 namespace, and import {select, selectAll} from 'd3-selection' which avoids importing everything. Ideally I would like something like that:
import {select, selectAll} as d3 from 'd3-selection'
d3.select(...)
d3.selectAll(...)
Is it possible? I want to keep the usual code syntax of d3.function in my code, but also import only the symbols I need.
You can perform that in two lines of code
import {select, selectAll} from 'd3-selection';
const d3 = {select, selectAll};
Related
I am trying to import and use a d3 module. My project uses webpack.
The function in the module (https://github.com/d3/d3-plugins/blob/master/hive/hive.js) is declared like this:
d3.hive.link = function() {
I read the following to try and get the import working: https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ but I can't seem to crack the correct syntax to both import and call the link function.
Some of the variations I have tried are:
import {link as hiveLink} from 'd3-hive';
import {hive as hiveLink} from 'd3-hive';
import * as hiveLink from 'd3-hive';
Can someone point me at the correct import syntax?
The plugin you want to import is not an ES6 module. It is not compatible with D3 v4 (see README.md). So it just modifies your global d3 variable. While the article you referenced is about D3 v4 it does not work that way.
I think it is ok to import d3 library (version 3) which will initialize your global d3:
import * as d3 from 'd3';
and after that import that plugin which will add hive object into d3:
import 'd3-hive';
I would like to access some imports like Rx.Observable or Rx.Subject. Look at the following:
import {Observable, Subject} from 'rxjs'
This is valid but they will be imported into the current scope instead of a namespace.
import {Observable, Subject} as Rx from 'rxjs'
This is not valid.
import * as Rx from 'rxjs'
This is valid but it imports everything and can make file size larger.
Is there a solution?
If you're okay with having an extra JavaScript file to fulfill this purpose, I would suggest adding a new file with the line
export { Observable, Subject } from 'rxjs';
If that was in ./namespaces/rx.js, then in your existing file you could write
import * as Rx from './namespaces/rx.js';
which allows you to have a namespace with only the exports you wanted to target.
I read this post and i want use D3.js (v4+) using only import statement like this:
import { selection } from '../node modules/d3/build/d3.js';
But, because code output is UMD (or read this) and can't import because some globals is no defined, and ES6 can't resolve absolutive names in node_modules for example and vanilla don't suport import statement without extension like this:
import * as someFeature from './myAwesomeModule';
And this is pattern to import modules and each day is growing up like you see here.
How i can use import statement without any plugin today?
You can import d3 like this:
import * as d3 from 'd3';
See more here: https://github.com/d3/d3/blob/master/README.md#installing
import utilityRemove from 'lodash/array/remove';
import utilityAssign from 'lodash/object/assign';
import utilityRandom from 'lodash/number/random';
import utilityFind from 'lodash/collection/find';
import utilityWhere from 'lodash/collection/where';
let util;
util = {};
util.remove = utilityRemove;
util.assign = utilityAssign;
util.random = utilityRandom;
util.find = utilityFind;
util.where = utilityWhere;
Is there a better way to do the above using ES6 module system?
If these are the only symbols in your module, I would shorten the names and use the new object shorthand to do:
import remove from 'lodash/array/remove';
import assign from 'lodash/object/assign';
import random from 'lodash/number/random';
import find from 'lodash/collection/find';
import where from 'lodash/collection/where';
let util = {
remove,
assign,
random,
find,
where
};
If that could cause conflicts, you might consider moving this section to its own module. Being able to replace the lodash methods while testing could potentially be useful.
Since each symbol comes from a different module, you can't combine the imports, unless lodash provides a combined import module for that purpose.
If you're simply exporting a symbol without using it, you can also consider this syntax:
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
Which, to anyone importing and using your module, will appear as:
import {remove, assign} from 'your-module';
You can do this in a utils module:
//utils.js
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
export random from 'lodash/number/random';
export find from 'lodash/collection/find';
export where from 'lodash/collection/where';
and use it like this:
import * as util from './utils';
...
util.random();
import utilityRemove from 'lodash/array/remove';
import utilityAssign from 'lodash/object/assign';
import utilityRandom from 'lodash/number/random';
import utilityFind from 'lodash/collection/find';
import utilityWhere from 'lodash/collection/where';
let util;
util = {};
util.remove = utilityRemove;
util.assign = utilityAssign;
util.random = utilityRandom;
util.find = utilityFind;
util.where = utilityWhere;
Is there a better way to do the above using ES6 module system?
If these are the only symbols in your module, I would shorten the names and use the new object shorthand to do:
import remove from 'lodash/array/remove';
import assign from 'lodash/object/assign';
import random from 'lodash/number/random';
import find from 'lodash/collection/find';
import where from 'lodash/collection/where';
let util = {
remove,
assign,
random,
find,
where
};
If that could cause conflicts, you might consider moving this section to its own module. Being able to replace the lodash methods while testing could potentially be useful.
Since each symbol comes from a different module, you can't combine the imports, unless lodash provides a combined import module for that purpose.
If you're simply exporting a symbol without using it, you can also consider this syntax:
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
Which, to anyone importing and using your module, will appear as:
import {remove, assign} from 'your-module';
You can do this in a utils module:
//utils.js
export remove from 'lodash/array/remove';
export assign from 'lodash/object/assign';
export random from 'lodash/number/random';
export find from 'lodash/collection/find';
export where from 'lodash/collection/where';
and use it like this:
import * as util from './utils';
...
util.random();