I have a webpage with ES6 modules that I want to transpile with babel to ES5. Following the babel documentation on https://babeljs.io/docs/setup/#installation, I can successfully transpile the javascript folder with ./node_modules/.bin/babel js -d target but they don't transpile any HTML there. How can I transpile my index.html? Using it with the same syntax fails:
./node_modules/.bin/babel index.html -d index2.html
SyntaxError: index.html: Unexpected token (1:0)
> 1 | <!DOCTYPE html>
| ^
2 | <html>
3 |
4 | <head>
MWE
export default "Hello World";
<!DOCTYPE html>
<html>
<body>
<script type="module">
import message from "./js/message.js";
window.message = message;
</script>
<button onclick="alert(`Message: ${window.message}`);">Get Message</button>
</body>
</html>
I'm using babel 6.24.1 (babel-core 6.25.0) with npm 3.10.10. I know I don't need modules for this MWE, the real page is much more complex.
P.S.: I want to continue developing the untranspiled version to preserve my workflow. I want to use the transpiled code only for production.
You can't.
Babel is a JavaScript transpiler, it doesn't deal with HTML, or even JavaScript embedded in HTML.
Rewrite your HTML to use external JavaScript. Use addEventListener instead of intrinsic event handler attributes. Then apply Babel to the JS files.
Related
Rationale
I'm making a small website using svelte and sveltekit, and a library (roslibjs) that seems to be only usable within <head>.
It worked only in those 2 types of scenarios for me:
put everything in <head> and output to the console
import the library in <head>, but only by using <script src='https link here'></script>.
Everything else goes into onMount, outside of <head>.
1 is not acceptable, and while 2 is a temporary fix, I really don't want to rely on external links. (the site might be used in an offline environment)
What I tried
Since if I have all the code relying on the library inside <head> it works just fine, I tried to do so. But so long I couldn't find a way to export variables from <head>.
Example:
<svelte:head>
<script>
let a = 10
</script>
</svelte:head>
<p>{a}</p>
This throws an error saying 'a' is not defined.
Change the import line to <script src="node_modules/roslib/build/roslib.js"></script>, directly from the node_modules folder.
While this works in npm run dev, it doesn't once after npm run build.
What I expect
To be able to use the library with svelte3, but by using it from npm, not an external link.
One way to tackle this might be to export variables from <head>, but I couldn't find a way to do so.
Would like to:
Create a static HTML file from a view (so it should include all CSS and JS) using the technologies mentioned above (default Laravel installation)
What I tried:
Simply injecting the content of the app.js into the app.blade.php file with the following code (done this for the app.css and it worked) but it only printed out the text of the JS file:
<script defer>
{!! file_get_contents(public_path('js/app.js')) !!}
</script>
static-generator package => It is only for 4.2
Run npm production (instead of npm development) and it will minify the assets, won't leave in comments and stuff and the first solution (simply injecting it into the HTML file will work)
I am new to ExpressJS
index.js
res.render('welcome', { name : "bleh"});
welcome.html
<html lang="en">
<body>
<h1>Welcome</h1>
<script>
console.log(name)
</script>
</body>
</html>
How do I get the value of "name" in my HTML page?
You can't really pass variable to html with res.render.
You should consider using a template engine (there are many of them : pug, handlebar, nunjucks, ejs .... it's up to you to choose). In this case, you'll be able to pass variable with res.render (#cobaltway sended you the docs in comments)
Another options is to make ajax query in your welcome.html to your express server (which will work as an API).
So you'll have this in your index.js res.send({name : "bleh"});
I just started trying ES6 and i already got stuck with ES6 modules. I use babeljs for translating ES6 into ES5. My understanding is, that babel uses requirejs module loader behind the scenes to make the import happen.
So i am trying to set up a very basic sample of module loading but i cannot get it working.
I want to import a module from bar.js into index.html. Those files have same parent directory.
index.html code:
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/babel-standalone#6.22.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
</head>
<body>
<script type="text/babel">
console.log("Here we go.");
import {foo} from 'bar';
console.log(typeof foo);
</script>
</body>
</html>
bar.js code:
export function foo() {
console.log("Foo it!");
}
I get following error:
Uncaught Error: Module name "bar" has not been loaded yet for context:
_. Use require([])
Even more interesting thing happens when i change order of require.min.js and babel.min.js in the <head>. This time the text/babel script is not executed at all (no errors in console).
Could somebody, please, explain what is wrong? Or is this completely bad approach?
Please, do not suggest using bundlers like webpack. I dont want to use them yet.
I want to visualize README.md files from a project in github, in my website.
What is the best way to do this? Like fetch the markdown code and process the mark down locally? Or there is a way to fetch the already processed markdown from github?
One possible solution is to use a javascript-based markdown parser, such as https://github.com/evilstreak/markdown-js.
That library can be loaded from the browser and can display the markdown. In this example (taken from the aforementioned site), you would need to fetch and insert the markdown in the output of your site:
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Insert proxied **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
Use Github API - Markdown on your javascript.
Here is a much better way to do it that seems to be more in line with the questions and it certainly suited my needs.
This implements a server-side, back-end processor that servers up HTML rendered from Markdown on the fly.
Here is an excerpt for PHP, but other languages are supported and documented in the link:
PHP
Download PHP Markdown (or PHP Markdown Extra) and PHP SmartyPants
from Michel Fortin.
Put markdown.php and smartypants.php somewhere in
PHP's include path (or in the same directory as render.php).
Add an alias in your Apache config:
Alias /markdown/ "/var/www/support/markdown/"
Add rewrite rules. This can be done in the .htaccess file for a specific folder, or in the global Apache config. Some common extensions are included, but you can adjust them to your needs. (You might want to process all text as Markdown by adding "txt".)
# display Markdown as HTML by default
RewriteEngine on
RewriteRule .+\.(markdown|mdown|md|mkd)$ /markdown/render.php
RewriteRule .+\.(markdown|mdown|md|mkd)\-text$ /markdown/render.php [L]
https://github.com/zhlicen/md.htm
An example of zeromd.js
Just serve the md.htm file and md files, and visit directly by url: /md.htm?src=README.md
Or directly use my github page, Example:
https://b.0-0.plus/blog/md.htm?src=https://raw.githubusercontent.com/microsoft/vscode/main/README.md