Using Modules in the Browser (without WebPack)
Solution 1
It's a pain.
exports
and require
are part of the CommonJS spec. If I remember correctly, webpack implements it internally. You need the same functionality, because it's not part of ES5.
Try RequireJS, or something similar to load your modules.
Solution 2
I've been stuck with this for a while and after playing around I found a solution. You don't need any libraries or webpack to do this and I'm not sure this works outside of chrome.
- You need to run this code on a webserver or else it won't work (in other words, it has to be on localhost, NOT file://)
- Make a folder called
jsmodule
- create a file called
index.html
with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js module</title>
</head>
<body>
<h1>JS module test</h1>
<script type="module" src="script.js"></script>
</body>
</html>
- Create a file in same folder called
script.js
with the following code:
import Person from './Person.js';
import Book from './Book.js';
let person1 = new Person();
let someBook = new Book();
- create a file in same folder called
Person.js
with the following code:
export default class Person{
constructor(){
alert("hallo from person");
}
}
- create a file in same folder called
Book.js
with the following code:
export default class Book{
constructor(){
alert("Hallo from book");
}
}
- Run the
index.html
on you webserver (localhost)
Related videos on Youtube
sleeper
Just a student of all things web whose current focus is on PHP and WordPress and related technologies (Javascript, MySQL).
Updated on July 10, 2022Comments
-
sleeper almost 2 years
I'm grokking my way through ES6 and I ran into Modules (nice!) and in learning, I am trying to see if I can use them in the browser without WebPack (which I haven't learned yet).
So, I have the following files/folder structure in my JS directory
js - lib (for complied es6 via Babel) - mods (compiled modules) - module.js (compiled via Babel) - app.js (imports modules, attached to index.html) - src (for "raw" es6) - mods (es6 modules) - module.js (es6 module) - app.js (imports modules)
In js/src/mods/module.js, I have the following code....
export const topTime = 1.5; export const subTime = 0.75;
Which is imported by js/src/app.js ...
import { topTime, subTime } from './mods/modules'; console.log(topTime); console.log(subTime);
I then compiled all es6 files to es5 (which placed the files in the lib dir.)
npm run babel
Now I can run the main file (js/lib/app.js) inside my editor (vscode/output tab)
[Running] node "/home/me/www/es6.local/js/lib/app.js" 1.5 0.75
...but I think that is only because it's running in node.
It breaks when I call my index.html file (with js/lib/app.js) in the browser (FF) as I get the following error...
ReferenceError: require is not defined
So I see that babel compiled this...
import { topTime, subTime } from './mods/modules';
into this...
var _modules = require('./mods/modules');
...But I thought this was valid es5? ...no? So HOW was this done BEFORE webpack? Please advise.
Here is my
package.json
(in case it helps)...{ "name": "es6.local", "version": "0.0.1", "description": "JavaScript ES6 Testing Sandbox", "main": "index.html", "scripts": { "babel": "babel js/src --out-dir js/lib --source-maps" }, "author": "Student", "license": "ISC", "devDependencies": { "eslint": "^4.16.0", "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.6.0", "eslint-config-airbnb": "^16.1.0", "babel-cli": "^6.26.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1" }, "babel": { "presets": [ [ "env", { "targets": { "browsers": [ "last 2 versions", "safari >= 7" ] } } ] ] } }