• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 51
  • Last Modified:

Importing an ES6 module for use with single html page without local node server, angular or react

I'm currently doing a small from which only contains a html5 pages .. index.html.

Currently I am adding the javascript code to the actual page between script tags.

What I want to do is to create an ES6 module and import it to to this index.html page.

But I want to do this without having to use node, angular or react in a project.

What is the easiest ay to do this with my layout?
0
error2013
Asked:
error2013
  • 3
  • 2
1 Solution
 
Julian HansenCommented:
You could use Babel to transpile your ES6 code to ES5 - that is the standard way of doing it
0
 
error2013Author Commented:
I'm reading that I can use babel on my index.html as a standalone via cdn?

If so how would I use it?
0
 
Julian HansenCommented:
You can but why would you want to do that? It is just adding an overhead to your page repeating the same transpile against a static source.

Why not use webpack or similar to build your site - do the transpile of your module and produce an optimised output.
0
 
error2013Author Commented:
Because this is just for a quick thing I'm doing for testing some stuff
0
 
Julian HansenCommented:
Then just add the babel plugin and declare your scripts in a babel script block
<script type="text/babel">
...
</script>

Open in new window

Example
<!doctype html>
<html>
<head>
<title>Test Bable</title>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
var x = ['apple','dog','cat','monkey','car'];

var p = x.filter(aa => {
  return aa.indexOf('c') > -1;
});
console.log(p);
</script>
</body>

Open in new window

More information here https://babeljs.io/docs/setup/#installation
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now