Menu
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"
]
}
}
]
]
}
}
603
With JavaScript modules fully supported in every major browser, savvy developers can now deliver production-ready apps without Webpack.
For most browsers, yes, you can accomplish getting all needed code to the browser with just ES6 modules, without Webpack.
You don't need webpack nor babel to make an mpm module. Just put in any folder the files you want to distribute, specifying the main entry point and export elements on that file.
Being able to call Node. js modules from JavaScript running in the browser has many advantages because it allows you to use Node. js modules for client-side JavaScript applications without having to use a server with Node.
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.
jsmodule
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>
script.js with the following code:import Person from './Person.js';
import Book from './Book.js';
let person1 = new Person();
let someBook = new Book();
Person.js with the following code:export default class Person{
constructor(){
alert("hallo from person");
}
}
Book.js with the following code:export default class Book{
constructor(){
alert("Hallo from book");
}
}
index.html on you webserver (localhost)
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
