【问题标题】：how to use node.js module system on the clientside如何在客户端使用 node.js 模块系统
【发布时间】：2011-06-24 02:40:09
【问题描述】：

我想在客户端 javascript 应用程序中使用 CommonJS 模块系统。我选择 nodejs 作为实现，但找不到任何关于如何使用 nodejs 客户端的教程或文档，即不使用node application.js

我在我的 html 页面中包含了这样的 node.js：

<script type="text/javascript" src="node.js"></script>

请注意，我没有在本地机器上制作 nodejs，无论如何我在 Windows 上（我知道 Cygwin 选项）。当我想在我自己的 javascript 中使用 require 函数时，它说它是未定义的。

var logger = require('./logger');

我的问题是，可以这样使用nodejs吗？

【问题讨论】：

你可以试试组件：github.com/component/component
如果您想使用 npm 模块，可以尝试 browserify：browserify.org

标签： javascript node.js

【解决方案1】：

github 上的 SubStack 有一个名为 node-browserify 的模块。

它将压缩和捆绑您的模块并将其作为单个 js 文件交付，但您可以像 Node.js 一样使用它（来自模块自述文件的示例）：

<html>
    <head>
    <script type="text/javascript" src="/browserify.js"></script>
    <script type="text/javascript">
        var foo = require('./foo');

        window.onload = function () {
            document.getElementById('result').innerHTML = foo(100);
        };
    </script>
</head>
<body>
    foo = <span style='font-family: monospace' id="result"></span>
</body>
</html>

来自模块说明：

浏览器

node 模块和 npm 包的浏览器端 require()**

Browserify 会提前在您指定的挂载点捆绑所有内容。没有这个 ajaxy 模块加载业务。

更多功能：

递归捆绑 npm 模块的依赖关系

将 es5-shim 用于糟糕的浏览器

{min,ugl}ification 过滤器

咖啡脚本也可以！

【讨论】：

我已经使用 Browserify 一段时间了。真是头疼……试试 Head JS
@BMiner，您应该将其添加为单独的答案。所以人们可以投票赞成/反对。
@marcello 你确定这就是 Browserify 的工作方式吗？根据我的阅读，您不能只在其他代码之前在库中添加<script> 标记...您必须将需要节点模块的代码编写为main.js，然后运行命令行browserify main.js -o bundle.js将main.js 及其所有require 依赖项捆绑到bundle.js 文件中。我找不到使用您的代码示例中提供的模式的工作示例。如果我错了，你能给我一个链接吗？

【解决方案2】：

Browserify 神奇地让你做到这一点。

【讨论】：

最佳答案。谢谢。

【解决方案3】：

Node.js 是一个服务器端应用程序，您可以在服务器端运行 javascript。你要做的是在客户端使用require函数。

最好的办法是自己编写require 方法或使用任何其他使用不同语法的实现，例如requireJS。

做了一些额外的研究后，似乎没有人使用 commonJS 语法为客户端编写过 require 模块。我会在不久的将来自己写，我建议你也这样做。

[编辑]

一个重要的副作用是require 函数是同步的，因此加载大块javascript 将完全阻塞浏览器。这几乎总是一个不需要的副作用。如果你要这样做，你需要知道你在做什么。设置了 requireJS 语法，以便它可以异步完成。

【讨论】：

啊，可惜了，我很喜欢nodejs的语法，requireJS好像比较啰嗦
@dfuse 我会看看我是否可以将写 require.js 用于客户端编码移到我的待办事项列表中。写完我会告诉你的。
嗯，你关于同步性的评论会让我重新审视 requireJS
猜猜@Raynos 从来没有这样做过... :(
@Kayvar 很难做到不可能...... ;-)

【解决方案4】：

对于 RequireJS，公认的答案是正确的。但是，快进到 2020 年，我们现在几乎在所有浏览器上都有 ES modules，除了 IE

所以，回答您的问题“如何在客户端使用 node.js 模块系统”。让我们从您已经可以利用 ES 模块的事实开始，例如

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Hello 2020</title>
  <!-- load the app as a module, also use defer to execute last -->
  <script type="module" src="./app.js"></script>
</head>

<html lang="en">
  <body>
      <div id="app">
          <h1>Demo</h1>
      </div>
  </body>
</html>

app.js

import { hello } from './utils.js'

window.addEventListener('DOMContentLoaded', function (e) {           
    document.getElementsByTagName('h1')[0].innerText = hello('world');
});

util.js

function hello(text) {
    return `$hello {text}`;
}

export { hello };

现在让我们假设你想在浏览器中使用一个 npm 包（假设这个包可以在浏览器和节点上运行）。在这种情况下，您可能需要查看 Snowpack.

Snowpack 2.0 是为这个新的网络时代而设计的构建系统发展。 Snowpack 从您的开发环境中删除捆绑器，利用原生 ES 模块 (ESM) 支持来提供构建文件直接到浏览器

换句话说，您可以使用 npm 包，从而允许您在客户端应用程序中使用“节点模块系统”。

【讨论】：

【解决方案5】：

网页包

我会推荐Webpack，它可以自动加载节点模块、依赖关系、缩小等等。

安装

要在你的项目中使用节点模块，首先在你的机器上安装node.js。包管理系统NPM 应该一路安装。如果您已经安装了 node.js，请将 Node.js 和 NPM 更新到最新版本。

用法

初始化

在代码编辑器中打开您的项目，并通过在命令行中键入 npm init -y 来初始化 npm。接下来，通过键入 npm install webpack webpack-cli --save-dev 在本地安装 webpack。（--save-dev 表示这些依赖项已添加到您的 package.json 文件的 devDependencies 部分，生产不需要）

重新排序文件夹结构

按照下面的树形结构重建您的项目文件夹：

yourProjectName
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

创建一个dist 文件夹来保存所有分发文件并将index.html 移动到该文件夹。接下来，为所有源文件创建一个src 文件夹并将您的 js 文件移动到该文件夹。您应该使用与树结构中显示的完全相同的文件和文件夹名称。（这些是 Webpack 的默认设置，但您可以稍后通过编辑 webpack.config.js 进行配置）

重构依赖关系

删除index.html 中的所有<script> 导入，并在</body> 标记前添加<script src="main.js"></script>。要导入其他节点模块，请在 index.js 文件的开头添加 import statements。例如，如果您想导入lodash，只需键入import _ from 'lodash';，然后继续在index.js 文件中使用_。

注意：不要忘记在 JS 中导入之前先安装 node 包。要在本地安装 lodash，请键入 npm install lodash。 Lodash 将自动保存到您的生产依赖项package.json

运行 Webpack

最后，通过在命令行中输入 npx webpack 来运行 webpack。您应该会看到 Webpack 在 dist 文件夹中为您生成了 main.js。

其他资源

以上指南只提供了最基本的 Webpack 使用方法。要探索更多有用的用例，请访问 Webpack 的 official tutorial。它提供了关于资产管理、输出管理、开发和生产指南等主题的极其全面的教程。

参考

https://webpack.js.org/guides/getting-started/

【讨论】：

如果我们导入‘fs’模块，并使用‘fs.readFileSync’使用fs读取文件，它似乎不会工作
@PraveerKumar 我发现包 fs 目前没有从 npm 使用。对于开始加载模块，我建议您查看codesandbox，它完全自动化了 npm 模块、React、Vue、Angular、Gatsby 等的模块捆绑。它实际上在浏览器中使用了 VC 代码，并具有热重载和代码协作功能。我发现它对于测试新模块和 API 特别有用。

【解决方案6】：

如果您想使用与 Node.js 相同的样式模块为浏览器编写代码，请尝试Webmake。也可以看看以这种方式构建应用程序的简单原型：SoundCloud Playlist Manager

【讨论】：

不错！我看到的是你自己的项目？

【解决方案7】：

客户端有一个很好的 require 类 node.js 库。这叫做总结。看看kamicane/wrapup

【讨论】：