如何通過 browserify 在客戶端 js 上使用 require

Question

我創建了一些執行某些任務的模塊，我正在導出它，我想在客戶端 js 上使用它。 我的文件夾結構是這樣的

我希望能夠使用 const createRoomId = require("../../services/createRoomId"); 在 private-chat.js 文件中，但我得到 require 沒有定義。 我已經安裝了 browserify 並嘗試了這個

browserify ../../services/createRoomId.js -o bundle.js

在創建 bundle.js 文件的控制台中。 我還在 html 中添加了腳本 bundle.js。

Answer 1

該錯誤是由於“require”方法引起的，該方法未在客戶端（瀏覽器）中定義。 因為“require”方法屬於Nodejs。

您可以使用 browserify 處理此問題，如下所示。 但最好的方法是使用腳本標簽並將類型屬性設置為“模塊”，並使用 ES6 模塊導入/導出！

但是，推薦的方法是這個。 在 HTML 中，使用屬性 type="module" 包含主 JavaScript 文件

 <script type="module" src="script.js"></script>

在 createRoomId.js 文件中，包含另一個文件，如下所示：

 import { myFunction } from './createRoomId.js'; ... // alert(hello());

在包含的文件 (createRoomId.js) 中，您必須導出要導入的函數/類：

 export function hello() { return "Hello World"; }