如何通过 browserify 在客户端 js 上使用 require答案

【问题标题】：How to use require on client side js with browserify如何通过 browserify 在客户端 js 上使用 require
【发布时间】：2021-04-05 23:50:02
【问题描述】：

我创建了一些执行某些任务的模块，我正在导出它，我想在客户端 js 上使用它。我的文件夹结构是这样的

我希望能够使用 const createRoomId = require("../../services/createRoomId");在 private-chat.js 文件中，但我得到 require 没有定义。我已经安装了 browserify 并尝试了这个

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

在创建 bundle.js 文件的控制台中。我还在 html 中添加了脚本 bundle.js。

【问题讨论】：

【解决方案1】：

错误是由于“require”方法导致的，该方法未在客户端（浏览器）中定义。因为“require”方法属于Nodejs。

您可以使用 browserify 处理此问题，如下所示。但最好的方法是使用脚本标签并将类型属性设置为“模块”，并使用 ES6 模块导入/导出！

但是，推荐的方法是这个。在 HTML 中，使用属性 type="module"

包含主 JavaScript 文件

&lt;script type="module" src="script.js"&gt;&lt;/script&gt;

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

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

在包含的文件 (createRoomId.js) 中，您必须导出要导入的函数/类：

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

【讨论】：