0. The Short Answershort answer
1. The Basicsbasics
I tried somea simple HTML codefile – index.html – as follows:
<!-- demo.html - minimal HTML to keep it simple -->
<html><head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="#">
</head>
<body>
<h1>Hello world!</h1>
<p>Experimenting with JavaScript modules.</p>
<script type="module" src="js/functions.js"></script>
</body></html>
<!-- index.html - minimal HTML to keep it simple -->
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="#">
</head>
<body>
<h1>Hello world!</h1>
<p>Experimenting with JavaScript modules.</p>
<script type="module" src="js/functions.js"></script>
</body>
</html>
AndIn the JavaScript code is just one linesubfolder - not countingjs I put the commentJavaScript file functions.js:
// js/functions.js
alert("Hello");
// js/functions.js
alert('Hello');
MyWhen double-clicking index.html, my default web browser – Firefox 89.0
(64-bit) – shows the following, after pressing F12. Notice
Notice how the JavaScript code is not
running running:
For an issue like this, a recommended action is to open the browser's development tools, typically by hitting F12 on the keyboard. Here is what Firefox 77 says:
In textThe error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/stackexchange/reproduce/jsModule/moduleNW/basics/js/functions.js. (Reason: CORS request not http).
But I want to run the JavaScript code as a module, so I put back
type="module" intoin the HTML file.
2. Install and Runrun a Local Web Serverlocal web server
Actually, toTo run it as a modulemodule, it needs to run on a web server.
Thus, if you want to run the code on your own computer, you will need to
(install and) start a local web server. One
One currently popular alternative is
live-server.
Here is what worked for me.
- Open a terminal. (On Windows:
cmd.exe.) - Type
npmand hit Enter to see if Node.js is installed. - If you get
command not found, download at https://nodejs.org/en/download/ and install. 1
(On Ubuntu, you can trysudo apt install -y nodejs.) - For Windows users only: do
cd /D "C:\Program Files\nodejs".
By changing to that directory, the installed npm package will be reachable from anywhere - as long asC:\Program Files\nodejsis in your%PATH%environment variable. - Install live-server:
npm install live-server -g. - Change directory to where your page lives:
cd <path-to-demoindex.html>. - Start the server:
live-server demo.html
(Should openlocalhost:8080in your default browser and show the alert. See below.)
Note 1:.
I am on Windows 10, but the above instructions should work fine on Linux and
macOS too.
Note 2:.
Here I used Firefox 7789.0, but I have tried Google Chrome 8391.0 as well.
The only notable difference is the CORS error message, which in Chrome reads:
Access to script at 'file:///C:/stackexchange/reproduce/jsModule/moduleNW/basics/js/functions.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
3. Exporting and Importingimporting
CreateNext I create a new folder modulesdemo2 containing the following demo2.html:
<!-- demo2.html - even shorter HTML for simplicity -->
<body>
<h1>Hello world!</h1>
<p>Javascript modules.</p>
<script type="module" src="js/main.js"></script>
</body>
<!-- demo2.html - even shorter HTML for simplicity -->
<body>
<h1>Hello world!</h1>
<p>Javascript modules.</p>
<script type="module" src="js/main.js"></script>
</body>
AlsoI also create the following three JavaScript files in the sub-foldersubfolder js:
// js/module1.js
export function hi() {console.log("Hi from module 1.");}
// js/module1.js
export function hi () { console.log('Hi from module 1.'); }
// js/module2.js
export function howdy() {console.log("Howdy from module 2!");}
// js/module2.js
export function howdy () { console.log('Howdy from module 2!'); }
// js/main.js
import {hi} from './module1.js';
import {howdy} from './module2.js';
hi();
howdy();
// js/main.js
import { hi } from './module1.js';
import { howdy } from './module2.js';
hi();
howdy();
RunNow I run live-server from the terminal in the folder where demo2.html resides
resides.
This time I start it by typing
live-server --port=1234 --entry-file=demo2.html
and hitting Enter. Expect to see something likeScreenshot:
- Installing Node.js live-server
- Export and ImportThe live-server docs
- liveLive-server can't find the file specified
- Export and Import
1 Shortly after the last time I installed Node.js onOn Windows 10,
I had I once needed to
repair the installation.