I have a file where i defined the absolute path of directory.
Ex : script=/absolutepath/scripts
utility=/absolutepath/utility
I want to use "script"/"utility" instead of absolute path in other javascript files.How i can do this.
What i want :
import random from "script/random.js"
instead of
import random from "/absolutepath/scripts/random.js"
PS :I am using k6 load generating framework which doesn't support node modules.
You currently can't do that in k6 v0.26.0.
Import paths like that are reserved for internal k6 modules (e.g. k6/http) and "magic" remote import URLs (e.g. import from github.com/loadimpact/k6/samples/thresholds_readme_example.js instead of https://raw.githubusercontent.com/loadimpact/k6/master/samples/thresholds_readme_example.js, and we're trying to softly discourage this). You can't define your own, you either have to use relative paths or absolute paths when importing your own JS files.
You could try using importmaps.
Inside your index.html:
<html lang="en">
<head>
<script type="importmaps">
{
"imports": {
"random": "/absolutePath/scripts/random.js"
}
}
</script>
<script type="module" src="app.js"></script>
</head>
</html>
You can now import your module from ANYWHERE
import random from 'random'
Related
Stackblitz compiles the code to es5 (or es3).
The problem is that web components need the class notation in order to work.
In the example here, I'm trying to use the 3rd party #material web components.
Is there any way to tell stackblitz not to compile certain libraries or give it a target compilation to es6 (preferably es2020)?
Try to custom-elements-es5-adapter to your imports or html (depending on your needs).
Docs for using custom-elements-es5-adapter.js
import '#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Stackblitz
Further examples:
using script src in html: Stackblitz
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
using import custom-elements-es5-adapter.js : Stackblitz
// These imports must be first.
import '#webcomponents/webcomponentsjs/webcomponents-bundle.js';
import '#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// All other top-level imports should be specified here so that (a) they follow
// the polyfills and adapter and (b) so that stackblitz will convert their
// module specifiers.
import '#polymer/iron-selector/iron-selector.js';
https://stackblitz.com/edit/js-woikq4?file=index.js
I need to import a library in my vue component, in the documentation I explain how to install it using npm (already do this step) but not how to import it into a vue component, this is the way in which it explains how to use the files:
<link href="node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="node_modules/webdatarocks/webdatarocks.js"></script>
and this is the way to instantiate the library:
<script>
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
</script>
So what is the best way to call this in my component?
This is a bit heavy.
The library is is not develop in module-like system, so the solution is make the js file imported as global.
A good library would be like const WebDataRocks = require("WebDataRocks"); or with imports, but the library is made only for end-client.
First Part - Add the JS file to the global web client
To use WebDataRocks you have to get the global variable, to get the global variable you have to inyect, as common javascript on html but with webpack.
Here are a solution for this
Webpack - How to load non module scripts into global scope | window
You have to do this for webdatarocks.toolbar.min.js and webdatarocks.js
Second Part - Add the CSS
You have some options, the easy way i found to do this is use require in your <script> zone:
require('../node_modules/webdatarocks/webdatarocks.js')
Good luck! 😁
If something fails check the paths and let us know more information about it
Alternative solution (But worse)
If you are going to use this script in a internet system, you could insert the script and CSS in the HTML. For this do:
Open index.html
Add this code on the head section:
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
Rebuild
Extracted from WebDataRocks React Example
Important! this is unsafe ☣ ⚠
Make this only if you are sure about what this mean
If the webdatarocks CDN's fails, your app will also fails.
Hope it helps :)
I did this and it works:
import WebDataRocks from 'webdatarocks'
import '#/../node_modules/webdatarocks/webdatarocks.min.css' // # is resolved to src/ folder
I didn't import the toolbar as I don't need it:
WebDataRocks({
container: '#pivot',
toolbar: false,
...
})
I am able to define a module in my html file me.html:
<script type="module" id="DEFAULT_MODULE">
import Atom from './atom.js';
console.log("definition of getAtom")
export default function getAtom(){
return new Atom('atom');
}
console.log("exported getAtom")
</script>
Also see
https://blog.whatwg.org/js-modules
https://github.com/whatwg/html/pull/443#issuecomment-167639239
=> Is it possible to import that "anonymous" module to another module script in the same html file? Or to some "code behind"- JavaScript file that also has been loaded by the me.html file? The export seems to work; at least it does not throw any error.
For the import of the getAtom method I tried for example:
<script type="module">
import getAtom from '.'; //this line does not work
console.log("usage of getAtom")
var atom = getAtom();
</script>
I would expect some syntax like
import getAtom;
import getAtom from '.';
import getAtom from window;
import getAtom from './me.html';
import getAtom from '.DEFAULT_MODULE';
However, none of these lines worked.
=>What is the correct syntax to reference the "anonymous" module if it is possible at all?
I use Chrome version 63.0.3239.108.
Related question:
How to dynamically execute/eval JavaScript code that contains an ES6 module / requires some dependencies?
As I understand, there is no way to import "anonymous" module, because "anonymous" module have no module specifier or individual url (its import.meta.url is just the html url as current spec). In theory it can be extended in the future, but I can not find the good use cases for such feature.
I am currently using jspm and SystemJS to load ES6 modules. However, I would like to be able to
Scan the page for certain selectors (e.g., id, data-plugin)
Map these selectors to their module dependencies
Load only those modules
My thought was to handle these imports through the single entry point, System.import('src/main'), that has access to the document. I could then find the relevant selectors, map those selectors to modules, and then import those modules.
src/main would look something like this:
['d3', 'jquery'].forEach(function(dependency) {
import dependency;
});
This is not a viable solution as it is invalid syntax. Is there a better way to achieve dynamic module loading in this sense?
Normal import syntax can't be used to conditionally load modules, as you've already seen. To get around this, we can use the programmatic API provided by System. You're already familiar with this API, since you use it to System.import('src/main');.
To conditionally load modules, instead of using the import keyword, you just have to continue using the System.import method.
An example of this:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
</head>
<body>
<div id='one'>One</div>
<div>Two</div>
<script>
System.import('main');
</script>
</body>
</html>
main.js
const map = {
'#one': 'one',
'#two': 'two'
};
for (let selector in map) {
if (document.querySelector(selector)) {
System.import(map[selector]);
}
}
one.js
window.HAS_ONE = true;
two.js
window.HAS_TWO = true;
In this example, window.HAS_ONE would be defined, but window.HAS_TWO would remain undefined.
I want to use ES6 for my next project and I'm using Traceur as transpiler for the purpose. I got it working the way described in the Getting Started guide. However I would like to compile all my source files into single minified file in a way they describe it on the Compiling Offline page. But I cannot get it to work with multiple source files organized in a nested directory structure.
Here's a sample project to explain the problem. It has index.html in root folder and two .js files under src.
<project-root>
/index.html
/src/one.js
/src/two.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="traceur.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<script type="module" src="src/two.js"></script>
<script type="module">
import Two from 'src/two.js';
let t = new Two();
console.log(t);
</script>
<title>Title</title>
</head>
<body>
</body>
</html>
src/one.js
export default class One {
constructor() {
console.log("One constructor");
}
}
src/two.js
import One from 'src/one.js';
export default class Two extends One {
constructor () {
console.log("Two constructor");
super();
}
}
As I said, if I open index.html in browser, it will correctly work, printing the instance of Two to console.
But when I try to compile this offline, I get following error
PS D:\code\flattraceur> traceur.cmd src/two.js --out out\two.js
[Error: Error: ENOENT: no such file or directory, open 'D:\code\flattraceur\out\src\one.js'
Specified as src/one.js.
Imported by ../src/two.js.
Normalizes to src/one.js
locate resolved against base 'D:/code/flattraceur/out/'
]
As you can see, while compiling src/two.js, traceur looks for src/one.js under the output directory. I couldn't find any options on traceur that would let me customize the root of its search for referenced modules. I tried the --dir option too, but it fails too.
PS D:\code\flattraceur> traceur.cmd --dir src out
Error: At least one input file is needed
Any suggestions?