在浏览器中使用模块（没有 WebPack）答案

【问题标题】：Using Modules in the Browser (without WebPack)在浏览器中使用模块（没有 WebPack）
【发布时间】：2018-07-07 15:29:21
【问题描述】：

我在 ES6 中摸索，遇到了模块（很好！），在学习中，我想看看我是否可以在浏览器中使用它们没有 WebPack（我还没学过）。

所以，我的 JS 目录中有以下文件/文件夹结构

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)

在 js/src/mods/module.js 中，我有以下代码....

export const topTime = 1.5;

export const subTime = 0.75;

js/src/app.js 导入的...

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

console.log(topTime);

console.log(subTime);

然后我将所有 es6 文件编译为 es5（将文件放在 lib 目录中。）
```
npm run babel
```
现在我可以在我的编辑器（vscode/输出选项卡）中运行主文件（js/lib/app.js）
```
[Running] node "/home/me/www/es6.local/js/lib/app.js"

1.5

0.75
```

...但我认为这只是因为它在节点中运行。

当我在浏览器 (FF) 中调用我的 index.html 文件（使用 js/lib/app.js）时，它会中断，因为我收到以下错误...
```
ReferenceError: require is not defined
```

所以我看到 babel 编译了这个……

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

进入这个...

var _modules = require('./mods/modules');

...但我认为这是有效的 es5？ ...不？那么在 webpack 之前这是如何完成的呢？请告知。

这是我的package.json（以防万一）...

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

【问题讨论】：

更改此人接受的答案可能会有所帮助

标签： javascript webpack ecmascript-6 babeljs ecmascript-5

【解决方案1】：

这很痛苦。

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

试试RequireJS，或者类似的东西来加载你的模块。

【讨论】：

【解决方案2】：

我已经被这个问题困扰了一段时间，在玩了之后我找到了解决方案。您不需要任何库或 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>

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

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


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

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

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

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

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

在您的网络服务器 (localhost) 上运行 index.html

【讨论】：

【解决方案3】：

在 HTML 中

script src="/my-script.js" type="module">

在脚本中

import axios from './axios.js';

HTML 中的 script 标签需要有模块的类型，否则解析器将无法理解 import 是什么。

import 语句需要有你要导入的 JS 文件的完整路径（相对路径应该没问题）：你不能 import axios from 'axios' 因为那只是一个字符串——浏览器不知道那是不是甚至是一个文件或该文件所在的位置。

浏览器不知道 NPM 是什么。它是 Node 的包管理器，一般不连接到 JavaScript。您需要实际文件（您可以使用 NPM 添加到您的项目中，然后路径将类似于 ./node_modules/axios/dist/axios.js

但即使使用它也可能会产生一些问题，因为它对 node_modules 文件夹中的某些包或库有一些内部依赖性

我建议使用 webpack 或任何错误工具

它自动神奇地使用 NPM 模块，然后将所有内容捆绑到一个输出文件中。

【讨论】：