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

Question

我正在摸索 ES6 并运行进入模块（很好！）并且在学习中，我正在尝试看看是否可以在浏览器中使用它们 without WebPack（我还没学）。

所以，我的JS目录中有如下files/folder结构

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
```
现在我可以运行主文件 (js/lib/app.js) 在我的编辑器 (vscode/output 选项卡)
```
[Running] node "/home/me/www/es6.local/js/lib/app.js"

1.5

0.75
```

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

当我在浏览器 (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"
            ]
          }
        }
      ]
    ]
  }
}

Answer 1

很痛苦。

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

尝试 RequireJS 或类似的方法来加载您的模块。

Answer 2

我已经被这个问题困扰了一段时间，在尝试之后我找到了解决方案。您不需要任何库或 webpack 来执行此操作，我不确定这是否适用于 chrome.

您需要在网络服务器上运行这段代码，否则它将无法工作（换句话说，它必须在本地主机上，而不是 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");
    }
}

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

Answer 3

在HTML

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

在脚本中

import axios from './axios.js';

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

import 语句需要包含您要导入的 JS 文件的完整路径（相对路径应该没问题）：您不能从 'axios' 导入 axios，因为那只是一个字符串——浏览器有不知道那是不是一个文件或那个文件在哪里。

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

但即使使用它也可能会产生一些问题，因为它对 node_modules 文件夹

中的某些包或库有一些内部依赖

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

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

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

Using Modules in the Browser (without WebPack)

javascript

ecmascript-5

ecmascript-6

webpack

babeljs