How to import with ECMAScript (vanilla javascript) with modules es6 - javascript

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

Related

javascript es6 import symbols into a namespace

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};

Syntax to import a d3 module using webpack

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';

What does import * do in Javascript?

I was browsing through this repo on Github and was trying to comprehend the working of the code
Here, the author (or programmer) have mentioned import * at multiple places so I am trying to comprehend and understand how import * work?
First in Game.js file of his repo he have mentioned/written like this
import * as actions from '../actions';
In VS Code, when if I click on '../actions using command It is redirecting me to this file -> index.js
then in Index.js they have something like this
import * as ActionTypes from './action-types';
when I click on ./action-types it redirects me to here action-types.js
I went through firefox docs but I wasn't able to clearly make sense for the first example like for one, the action folder contains multiple files and how does import * as actions from '../actions'; mean index.js file
While i get he have called/referenced the functions using actions.functionName() or ActionType.TypeName
My Prime question remains
how does import * as actions from '../actions'; mean index.js file ?
The import * as name syntax imports all exported content of a javascript file.
For example, if you want to import an entire module's contents, then access the doAllTheAmazingThings() function
import * as myModule from '/modules/my-module.js';
myModule.doAllTheAmazingThings();
From the docs
Import in js is new syntax of ES6 to import a module it has the same work of require but its easier to filter what do you want in a module
In your example you import * as actions from '../actions'; you import all function from ../actions file
its same to do const actions = require('../actions')
but its easier to manage what you want
this syntax is not work on all browser so be sure to use transpiler with babel or other
you can see this syntax in python too
When you reference a directory in an import statement, it looks and loads the index.js file in that directory. What I usually do there is export classes and functions under that directory in a grouped object, so they can be easily accessed:
For instance in index.js I export sth like:
{
Class1,
method1
}
where each is imported as such:
import Class1 from './Class1';
So they just group the classes/methods/... that are in files in the directory.
Then you can easily access it as such:
import { Class1, method1 } from './mymodule';
vs
import Class1 from './mymodule/Class1';

Dynamically reference static ESNext imports

Say I have these imports:
import clearLineReporter from '../modules/clear-line-reporter';
import karmaReporter from '../modules/karma-reporter';
import metaTestReporter from '../modules/meta-test-reporter';
import stdReporter from '../modules/std-reporter';
import tapJSONReporter from '../modules/tap-json-reporter';
import tapReporter from '../modules/tap-reporter';
import webSocketReporter from '../modules/websocket-reporter';
these must be referenced like I do above, in other words, I obviously can't do this:
const imports = {
stdReporter: import(...),
tapJSONReporter: import(...),
...
webSocketReporter: import(...)
}
Is there any way I can reference imported files through some form of reflection? Because it seems like I can't group them together to reference them somehow.
Instead of import syntax, I could use require(), but I am wondering if there is some way I can do some dynamic things with import statements, for example reference them all dynamically, such that if I add or remove an import, I don't have to change any other code.
There is a great answer to this question that I discovered by asking a different question, here:
exporting imports as a namespace with TypeScript
Create a file name grouped-modules.ts for example, where you want to simply list only the modules and export each one.
export {default as clearLineReporter} from '../modules/clear-line-reporter';
export {default as karmaReporter} from '../modules/karma-reporter';
export {default as metaTestReporter} from '../modules/meta-test-reporter';
...
export {default as stdReporter} from '../modules/std-reporter';
export {default as tapJSONReporter} from '../modules/tap-json-reporter';
Then in your module you can just do :
import * as mods from './grouped-modules'
export {mods}
It will export both types and values in a namespace called s. You can then import them using :
import {mods} from 'your-module'
const anObject: mods.clearLineReporter = ...;
This allows you to dynamically group your modules into one variable.
Is there any way I can reference imported files through some form of reflection?
Answer is dependent on environment, meant in questing, because import statement can be ES native modules implementation in browser, or babel-ed to require statements in node.js, or compile-time resolved bindings in webpack.
So, in each case there is solution to do something reflection. In node.js with babel-ed code import is just require wrapper, so any information is available there.
In browser with native ES modules, all requests to them can be served via ServiceWorker, so it can provide necessary information about fetched ES modules. Also in browser ES modules can be dynamically imported that way: https://matthewphillips.info/posts/loading-app-with-script-module
Most interesting part is webpack: compile-time resolve and semi-reflection can be achieved by externals resolver in functional style (https://webpack.js.org/configuration/externals/#function), and runtime by load module API (https://webpack.js.org/api/module-variables/#webpack_modules-webpack-specific- )

How to write import statement instead of require statement in Javascript?

I was importing one of the polyfill, "es6-promise" in my jsx file of react application but was not able to import it in a correct way.
I googled N number of solution finally one worked for IE.
require('es6-promise').polyfill()
its working fine but, why it was not working for import es6-promise from "es6-promise";
Is there any way to import it first in a variable and then calling the .polyfill() method to that variable?
There a multiple ways of how you can import other modules in your code: import
For example:
import * as ES6Promise from 'es6-promise';
ES6Promise.polyfill();
Just a couple more ways you can do it.
import { polyfill } from 'es6-promise';
polyfill();
or
import ES6Promise from 'es6-promise';
ES6Promise.polyfill();

Categories

Resources