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). <ol> <li> So, I have the following files/folder structure in my JS directory <pre class="prettyprint"><code>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) </code></pre> </li> <li> In js/src/mods/module.js, I have the following code.... <pre class="prettyprint"><code>export const topTime = 1.5; export const subTime = 0.75; </code></pre> </li> <li> Which is imported by js/src/app.js ... <pre class="prettyprint"><code>import { topTime, subTime } from './mods/modules'; console.log(topTime); console.log(subTime); </code></pre> </li> <li> I then compiled all es6 files to es5 (which placed the files in the lib dir.) <pre class="prettyprint"><code>npm run babel </code></pre> </li> <li> Now I can run the main file (js/lib/app.js) inside my editor (vscode/output tab) <pre class="prettyprint"><code>[Running] node "/home/me/www/es6.local/js/lib/app.js" 1.5 0.75 </code></pre> </li> </ol> ...but I think that is only because it's running in node. <ol start="6"> <li> It breaks when I call my index.html file (with js/lib/app.js) in the browser (FF) as I get the following error... <pre class="prettyprint"><code>ReferenceError: require is not defined </code></pre> </li> <li> So I see that babel compiled this... <pre class="prettyprint"><code>import { topTime, subTime } from './mods/modules'; </code></pre> into this... <pre class="prettyprint"><code>var _modules = require('./mods/modules'); </code></pre> </li> </ol> ...But I thought this was valid es5? ...no? So HOW was this done BEFORE webpack? Please advise. <hr> Here is my <code>package.json</code> (in case it helps)... <pre class="prettyprint"><code>{ "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" ] } } ] ] } } </code></pre>

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. <ol> <li>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://)</li> <li>Make a folder called <code>jsmodule</code> </li> <li>create a file called <code>index.html</code> with the following code:</li> </ol> <pre class="prettyprint"><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> </code></pre> <ol start="4"> <li>Create a file in same folder called <code>script.js</code> with the following code:</li> </ol> <pre class="prettyprint"><code>import Person from './Person.js'; import Book from './Book.js'; let person1 = new Person(); let someBook = new Book(); </code></pre> <ol start="5"> <li>create a file in same folder called <code>Person.js</code> with the following code:</li> </ol> <pre class="prettyprint"><code>export default class Person{ constructor(){ alert("hallo from person"); } } </code></pre> <ol start="6"> <li>create a file in same folder called <code>Book.js</code> with the following code:</li> </ol> <pre class="prettyprint"><code>export default class Book{ constructor(){ alert("Hallo from book"); } } </code></pre> <ol start="7"> <li>Run the <code>index.html</code> on you webserver (localhost)</li> </ol>

Using Modules in the Browser (without WebPack)

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"
            ]
          }
        }
      ]
    ]
  }
}

Can you use modules without Webpack?

With JavaScript modules fully supported in every major browser, savvy developers can now deliver production-ready apps without Webpack.

Do I need Webpack for ES6 modules?

For most browsers, yes, you can accomplish getting all needed code to the browser with just ES6 modules, without Webpack.

Can you use NPM 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.

Can I use node modules in browser?

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.

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)

Using Modules in the Browser (without WebPack)

Tags:

javascript

ecmascript-6

webpack

ecmascript-5

babeljs

sleeper

People also ask

1 Answers

Rami Nour

Recent Activity

Donate For Us

Using Modules in the Browser (without WebPack)

Tags:

javascript

ecmascript-6

webpack

ecmascript-5

babeljs

sleeper

People also ask

1 Answers

Rami Nour

Related questions

Recent Activity

Donate For Us