I use "babel" command to transpile ES6 script to ES5.
Ex: babel testES6.js --out-file testES5.js
It works fine. My question is how to transpile inline javascript.
For Ex: test.html
<html>
<head>
<script type="text/javascript">
//ES6 scripts
</script>
</head>
</html>
According the babel docs, it supports scripts typed text/ecmascript-6 or text/babel. Add the browser build into your page and set proper type for your scripts.
You can use this code and enjoy :)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
</script>
Related
I have installed the "lodash" using "npm install --save lodash" and imported in my JS file.My intention is to Deep clone of an Object and found that Lodash is the library which solve this problem. My HTML and JS files are as follows.
My HTML file is as follows.
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module" src="scripts.js" ></script>
</body>
</html>
My JS file (scripts.js) is as follows:
import _ from 'lodash';
let userOne = {
name: "Siju",
userFunction:function(){
return this.name;
}
};
// Deep Copy: Start
let userTwo=_.cloneDeep(userOne);
// Deep Copy: End
userTwo.name="Johnson";
userTwo.userFunction=function(){ return this.name.length }
console.log(userOne.name);
console.log(userTwo.name);
console.log(userOne.userFunction());
console.log(userTwo.userFunction());
But i am getting following errors.
Error1: (When use: import _ from 'lodash';)
Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".
Error2: (When use: import _ from './node_modules/lodash';)
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I have spend lot of time on this and did'nt get any suitable solution. I am really frustrated on this issue because it is a silly issue but did'nt get any proper fix in the internet. Most of the explanation is seems to be with so many dependency fixes and all. But no any fixes are worked for me. So anyone can be come up with simple and proper fix for this. Thank You Very Much in Advance!
You can go to http://lodash.com/ and download the entire .js file into your current project folder and then include the following line in your HTML body paragraph.
<script src="lodash.js"> </script>
And then import it at the top of your JavaScript file in which you would like to use it.
import _ from 'lodash'
I'm working on a Flutter web project. The web/index.html file is injecting a JavaScript script which could be simplified as:
<script>
window['dataLayer'] = [];
</script>
So in my flutter code, I can do:
#JS()
import 'package:js/js.dart';
#JS('dataLayer.push')
external void push(data);
push(myData);
to push myData in the window.dataLayer array.
However, in the tests, when I'm running
flutter test --platform chrome
I'm getting the error
TypeError: Cannot read properties of undefined (reading 'push')
when I call
push(myData);
because window['dataLayer'] has never been created.
How can I inject some javascript scripts the same way I can do in the index.html?
It is possible to load a custom HTML file while running the tests, see the instructions of the package test.
If your test file name is folder/my_test.dart, then you can create a html file named (folder/my_test.html):
<!doctype html>
<html>
<head>
<title>Custom HTML file title</title>
<link rel="x-dart-test" href="my_test.dart">
<script src="packages/test/dart.js"></script>
<script>
window['dataLayer'] = [];
</script>
</head>
</html>
See this StackOverflow question.
and then you can run
dart test --platform chrome
However, this is only supported with dart test and not flutter test, see this issue. In it, they recommend writing an integration test instead.
I have an html file with a link to css file bundle and at the bottom of that html file I have a
div which is a container for all javascript code and a javascript bundle like this
header excerpt from an auto generated html file
<head>
<link rel="stylesheet" type="text/css" href="./wicket/resource/com.demo.WicketApplication/bundle-ver-54903C08BD33E9FB5DA355BE40331F02.css" nonce="o8ucNjn605sWzLMeVlFgM-kh" />
</head>
body excerpt with javascript file and code
<script type="text/javascript" src="./wicket/resource/com.demo.WicketApplication/bundle-ver-E39F0FD375F78ED454CD6F59F3C635D4.js" nonce="o8ucNjn605sWzLMeVlFgM-kh"></script>
<script type="text/javascript" id="wicket-ajax-base-url" nonce="o8ucNjn605sWzLMeVlFgM-kh">
/*<![CDATA[*/
Wicket.Ajax.baseUrl="?1";
/*]]>*/
</script>
<script type="text/javascript" id="our_callback_url" nonce="o8ucNjn605sWzLMeVlFgM-kh">
/*<![CDATA[*/
our_callback_url = './?1-5.0-test';
/*]]>*/
</script>
<script type="text/javascript" nonce="o8ucNjn605sWzLMeVlFgM-kh">
/*<![CDATA[*/
Wicket.Event.add(window, "domready", function(event) {
tripleview.initMyComponent('#id2', tripleview.postJson.bind(tripleview, "./?1-5.0-test"));
Wicket.Event.publish(Wicket.Event.Topic.AJAX_HANDLERS_BOUND);
;});
/*]]>*/
</script>
So, when I navigate to my page with open devTools window the first time I get
I get warnings but no errors
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
But when I close devtools window and reopen it again I get an error
Refused to load the stylesheet 'http://localhost:8080/wicket/resource/com.demo.WicketApplication/bundle-ver-54903C08BD33E9FB5DA355BE40331F02.css' because it violates the following Content Security Policy directive: "style-src 'nonce-t0wrytDNiwGcyBiQ64Uln-uP'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
error in devtools after reopening devtools window
My question is why do I get this error only with css file but not javascript file. And why this error happens after I reopen devtools after closing devtools window?
P.S
Chrome version: Version 81.0.4044.113 (Official Build) (64-bit)
I had same warnings in my project. In my case gighmmpiobklfepjocnamgkkbiglidom is AdBlock extention. If you open chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map you will see some information about your extention. In my case it is:
{"version":3, <...> "webpack:///../adblock-betafish/alias/include.preload.js",<...>
I just turned off AdBlock in "chrome://extensions/" and it helped me.
You can delete AdBlock extension (or turn it off). I hope it will solve your problem.
I want to use modules in my javascript and html. When i use systemjs with version 5, i am getting error, in github i cant see the steps to configuration. If i removed System.config from below code, at that time i getting CORS issue.
What are the package i have to use to run modules in javascript and html
How to set the configurations for latest version
<!-- <script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/systemjs/dist//system.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/5.0.0/system.js"></script>
</head>
<body>
<script>
//Configuration
System.config({
'meta': {
'./js/*.js': {
format: 'esm'
}
}
});
System.import('./js/app.js');
</script>
I am getting Error : index.html:18 Uncaught TypeError: System.config is not a function. if I removed system.config i am getting Error : Unable to resolve bare specifier "js/app.js" from file:///C:/Train/ES6/systemjss/ at throwBare (system.js:184) at resolveImportMap (system.js:180) at system.js:734
During the development process, I've been using elm-reactor to test my one-page Elm application. But for production deployment, I would like to just store the compiler's output as static files on a webserver.
How do I compile an Elm page into a standalone pair of HTML + Javascript files?
Use elm-make to compile your Elm application to elm.js (target the module that defines main).
Create your own HTML file that includes that script and a script in the body that executes Elm.<Module-that-defines-main>.fullscreen()
Example
App.elm
module App where
import Text
import Signal
import Graphics.Element (Element)
main : Signal Element
main = "Hello World!" |> Text.asText |> Signal.constant
elm-make App.elm (creates elm.js)
App.html
<!DOCTYPE html>
<html>
<head>
<script src="elm.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">Elm.App.fullscreen()</script>
</body>
</html>
The answer to this ticket on the github project page is also quite helpful:
Finally, use this command to compile the file into a single, stand-alone HTML file.
$ elm make start-test.elm --output index.html