我希望在客户端JavaScript应用程序中使用CommonJS模块系统。我选择了Node.js作为实现，但是找不到任何关于如何在客户端使用Node.js的教程或文档，即不使用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上，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>
从模块描述中得知:
Browserify
在浏览器中使用 require() 来运行您的 node 模块和 npm 包**
Browserify 在您指定的挂载点预先打包所有内容。不需要进行任何 ajax 式的模块加载。
更多特性:
- 递归打包 npm 模块的依赖项
- 对于低版本浏览器，使用 es5-shim 进行兼容处理
- 针对 {min,ugl}ification 进行过滤
- 支持 CoffeeScript！
<script> 标签来引入库... 你必须将需要 node 模块的代码编写为 main.js，然后运行命令行 browserify main.js -o bundle.js 将 main.js 与其所有 require 依赖项捆绑到一个 bundle.js 文件中。我找不到使用你提供的代码示例中提供的模式的可行示例。如果我错了，请指点一下我到一个链接？ - Adam对于RequireJS，接受的答案是正确的。但是，快进到2020年，除了IE <= 11之外，几乎每个浏览器现在都支持ES模块。
因此，为了回答你的问题“如何在客户端使用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包（假设该包可以在浏览器和node上运行），那么你可能需要看看Snowpack。
Snowpack 2.0是一个为这个新时代的web开发设计的构建系统。 Snowpack将打包工具从开发环境中移除，利用本地ES模块（ESM）支持直接向浏览器提供构建后的文件。
换句话说，你可以使用npm包，从而允许你在客户端应用程序中使用“节点模块系统”。
Node.js 是一种服务器端应用程序，可以在服务器上运行JavaScript。你想要做的是在客户端使用 require 函数。
最好的方法是自己编写 require 方法或使用其他实现不同语法的实现，例如 requireJS。
经过进一步的研究，似乎没有人使用常见JS语法编写客户端的require模块。我很快就会自己编写，建议您也这样做。
[编辑]
一个重要的副作用是 require 函数是同步的，因此加载大量的JavaScript会完全阻塞浏览器。这几乎总是一个不希望发生的副作用。如果您要使用它，则需要知道自己在做什么。 requireJS 语法设置可以异步处理。
require.js 提前放到我的待办列表中。一旦我写好了，我会通知你的。 - Raynos我建议使用Webpack，它可以自动化加载node模块、处理依赖关系、压缩代码等。
为了在项目中使用node模块，请先安装node.js。在安装过程中，应该会同时安装NPM包管理系统。如果您已经安装了node.js，请更新到最新版本的Node.js和NPM。
打开您的项目，并通过命令行输入npm init -y来初始化npm。接下来，通过输入npm install webpack webpack-cli --save-dev来本地安装webpack。（--save-dev表示这些依赖项将被添加到devDependencies部分的package.json文件中，这些依赖项不是生产环境所必需的）
按照下面的树形结构重新构造您的项目文件夹：
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>。要导入其他 node 模块，请在 index.js 文件开头添加 import 语句。例如，如果您想要导入 lodash，只需键入 import _ from 'lodash';，然后继续在 index.js 文件中使用 _。
注意：不要忘记在 JS 中导入模块之前先安装 Node 包。要在本地安装 lodash，请键入 npm install lodash。Lodash 将自动保存到您的产品依赖项中的 package.json 中。
最后，在命令行中键入 npx webpack 运行 webpack。您会看到 Webpack 为您在 dist 文件夹中生成了 main.js。
以上指南仅提供使用 Webpack 的最基本方法。要探索更多有用的用例，请前往 Webpack 的 官方教程。它提供了极其详尽的教程，涵盖了诸如资源管理、输出管理、开发和生产指南等主题。
fs包。为了开始使用模块加载，我建议你查看codesandbox，它可以完全自动化地对npm模块、React、Vue、Angular、Gatsby等进行模块捆绑。它实际上在浏览器中使用VC Code，并具有热重载和代码协作功能。我发现它特别适用于测试新的模块和API。 - AlienKevin如果您想使用与Node.js相同的模块风格来编写浏览器代码，请尝试Webmake。同时，您还可以查看该方式构建的应用程序的简单原型：SoundCloud Playlist Manager