在瀏覽器中使用模塊（沒有 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