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

Question

我正在探索 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/output 选项卡）中运行主文件（js/lib/app.js）
```
 [Running] node "/home/me/www/es6.local/js/lib/app.js" 1.5 0.75
```

...但我认为那只是因为它在 node.js 中运行。

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

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

Answer 2

这是一种痛苦。

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

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

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）

问题描述

3 个解决方案

解决方案1
11 2019-01-16 22:11:42

解决方案2
0 已采纳 2018-01-29 00:22:15

解决方案3
-1 2020-03-05 09:06:02

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

问题描述

3 个解决方案

解决方案1 11 2019-01-16 22:11:42

解决方案2 0 已采纳 2018-01-29 00:22:15

解决方案3 -1 2020-03-05 09:06:02

解决方案1
11 2019-01-16 22:11:42

解决方案2
0 已采纳 2018-01-29 00:22:15

解决方案3
-1 2020-03-05 09:06:02