我想在客户端 javascript 应用程序中使用 CommonJS module系统。我选择 nodejs 作为实现，但找不到任何关于如何使用 nodejs 客户端的教程或文档，即不使用node application.js
我在我的 html 页面中包含了这样的 node.js：
<script type="text/javascript" src="node.js"></script>
请注意，我没有在本地机器上创建 nodejs，无论如何我都在 Windows 上（我知道 Cygwin 选项）。当我想require在我自己的 javascript 中使用该函数时，它说它是未定义的。
var logger = require('./logger');
我的问题是，是否可以像这样使用 nodejs？
github 上的 SubStack 有一个名为node- browserify 的module。
它将压缩和捆绑您的module并将其作为单个 js 文件交付，但您可以像使用 Node.js 一样使用它（module自述文件中的示例）：
<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>
从module描述：
浏览器化
用于节点module和 npm 包的浏览器端 require()**
Browserify 在您指定的挂载点提前捆绑所有内容。没有这个ajaxymodule加载业务。
更多功能：
- 递归捆绑 npm module的依赖项
- 对糟糕的浏览器使用 es5-shim
- {min,ugl} 化过滤器
- 咖啡脚本也可以！
Browserify神奇地让你做到这一点。
Node.js是一个服务器端应用程序，您可以在其中在服务器上运行 javascript。您要做的是require在客户端上使用该功能。
最好的require办法是自己编写方法或使用任何其他使用不同语法（如requireJS ）的实现。
经过一些额外的研究，似乎没有人使用 commonJS 语法为客户端编写了一个 require module。我最终会在不久的将来自己写，我建议你也这样做。
[编辑]
一个重要的副作用是该require函数是同步的，因此加载大块 javascript 将完全阻止浏览器。这几乎总是一种不需要的副作用。如果你要这样做，你需要知道你在做什么。设置了 requireJS 语法，以便它可以异步完成。
当涉及到 RequireJS 时，接受的答案是正确的。但是，快进到 2020 年，除了 IE <= 11 之外，我们现在几乎在每个浏览器上都有ES module。
所以，回答你的问题“如何在客户端使用 node.js module系统”。让我们从您已经可以利用 ES module的事实开始，例如
<!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>
应用程序.js
import { hello } from './utils.js'
window.addEventListener('DOMContentLoaded', function (e) {
document.getElementsByTagName('h1')[0].innerText = hello('world');
});
实用程序
function hello(text) {
return `$hello {text}`;
}
export { hello };
现在让我们假设您想在浏览器中使用 npm 包（假设这个包可以在浏览器和节点上运行）。在这种情况下，您可能需要查看 Snowpack。
Snowpack 2.0 是为这个 Web 开发新时代而设计的构建系统。Snowpack 从您的开发环境中删除打包程序，利用原生 ES module (ESM) 支持将构建的文件直接提供给浏览器
换句话说，您可以使用 npm 包，从而允许您在客户端应用程序中使用“节点module系统”。
我会推荐Webpack，它可以自动加载节点module、依赖项、缩小等等。
要在你的项目中使用节点module，首先在你的机器上安装node.js。包管理系统NPM应该一路安装。如果您已经安装了 node.js，请将 Node.js 和 NPM 更新到最新版本。
在您的代码编辑器中打开您的项目并通过npm init -y在命令行中键入来初始化 npm 。接下来，通过键入在本地安装 webpack npm install webpack webpack-cli --save-dev。（--save-dev意味着这些依赖项被添加到devDependencies您的package.json文件中不需要生产的部分）
按照下面的树结构重建您的项目文件夹：
yourProjectName
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
创建一个dist文件夹来保存所有分发文件并移动index.html到该文件夹。接下来，src为所有源文件创建一个文件夹，并将您的 js 文件移动到该文件夹中。您应该使用与树结构中出现的完全相同的文件和文件夹名称。（这些是 Webpack 的默认设置，但您可以稍后通过编辑对其进行配置webpack.config.js）
删除所有<script>导入index.html并添加<script src="main.js"></script>在</body>标签之前。要导入其他节点module，请在文件开头添加import 语句index.js。例如，如果您想导入lodash，只需在您的文件中输入import _ from 'lodash';并继续使用。_index.js
注意：不要忘记先安装 node 包，然后再将其导入 JS。要lodash在本地安装，请键入npm install lodash. Lodash 将自动保存到您的生产依赖项中package.json
最后，通过npx webpack在命令行中键入来运行 webpack 。您应该会main.js在dist文件夹中看到 Webpack 为您生成的内容。
以上指南仅提供了最基本的 Webpack 使用方法。要探索更多有用的用例，请转到Webpack的官方教程。它提供了关于资产管理、输出管理、开发和生产指南等主题的极其全面的教程。