使用純JS在另一個JS文件中包含一個JS文件

Question

我想在純JS的另一個JS文件中包含一個JS文件，所以沒有NPM或Yarn。

我不使用類/模塊，那么我該怎么做呢？

我對純 JS 的意思

純 JS 是可以直接包含在 HTML 中的 JavaScript，如下所示：

<script src="path/to/pure-js-file.js"></script>

我試過的

這是我的兩個文件：

app.js

require('./components/navbar.js');

components/navbar.js

alert('Navbar component!');

但我收到此錯誤：

Uncaught ReferenceError: require is not defined

因為普通瀏覽器不知道 require 關鍵字。

Answer 1

由於您不想使用模塊，您可以使用 AJAX 調用加載額外的腳本，然后使用 eval 運行它。 這是最直接的方法，但由於 JavaScript 沙箱安全模型，它僅限於您的域。 使用 eval 還為錯誤、黑客和安全問題打開了大門。 你可以這樣做：

function getFile(filePath) {
    var httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Cannot create an XMLHTTP instance');
      return false;
    }

    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          eval(httpRequest.responseText);
        } else {
          alert('There was a problem with the request.');
        }
      }
    };

    httpRequest.open('GET', filePath);
    httpRequest.send();
}

getFile('./components/navbar.js');