Using Modules in the Browser (without WebPack)

Question

Using Modules in the Browser (without WebPack)

sle*_*per 6 javascript ecmascript-5 ecmascript-6 webpack babeljs

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)

Run Code Online (Sandbox Code Playgroud)

In js/src/mods/module.js, I have the following code....
```
export const topTime = 1.5;

export const subTime = 0.75;
```
Run Code Online (Sandbox Code Playgroud)

Which is imported by js/src/app.js ...

import { topTime, subTime } from './mods/modules';

console.log(topTime);

console.log(subTime);

Run Code Online (Sandbox Code Playgroud)

I then compiled all es6 files to es5 (which placed the files in the lib dir.)
```
npm run babel
```
Run Code Online (Sandbox Code Playgroud)
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
```
Run Code Online (Sandbox Code Playgroud)

...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
```
Run Code Online (Sandbox Code Playgroud)
So I see that babel compiled this...
```
import { topTime, subTime } from './mods/modules';
```
Run Code Online (Sandbox Code Playgroud)
into this...
```
var _modules = require('./mods/modules');
```
Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ram*_*our 5

我已经坚持了好一阵子，在玩了之后找到了解决方案。您不需要任何库或Webpack即可执行此操作，而且我不确定这是否适用于chrome。

您需要在网络服务器上运行此代码，否则它将无法工作（换句话说，它必须在localhost上，而不是file：//上）
制作一个名为 jsmodule
创建一个index.html使用以下代码的文件：

<!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>

Run Code Online (Sandbox Code Playgroud)

在script.js使用以下代码调用的同一文件夹中创建一个文件：

import Person from './Person.js';
import Book from './Book.js';


let person1 = new Person();
let someBook = new Book();

Run Code Online (Sandbox Code Playgroud)

在Person.js使用以下代码调用的同一文件夹中创建文件：

export default class Person{
    constructor(){
        alert("hallo from person");
    }
}

Run Code Online (Sandbox Code Playgroud)

在Book.js使用以下代码调用的同一文件夹中创建文件：

export default class Book{
    constructor(){
        alert("Hallo from book");
    }
}

Run Code Online (Sandbox Code Playgroud)

index.html在您的网络服务器（本地主机）上运行

Answer 2

Nic*_*ick -1

很痛苦。

exports并且require是 CommonJS 规范的一部分。如果我没记错的话，webpack 在内部实现了它。您需要相同的功能，因为它不是 ES5 的一部分。

尝试使用RequireJS或类似的东西来加载模块。

归档时间：	7 年，9 月前
查看次数：	3180 次
最近记录：	6 年，10 月前