如何在客户端使用 node.js 模块系统
[英]how to use node.js module system on the clientside
问题描述
我想在客户端 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？
7 个解决方案
解决方案1
39 2011-02-19 16:00:18
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} 化过滤器
- 咖啡脚本也可以！
解决方案2
20 2013-05-15 23:43:22
Browserify神奇地让你做到这一点。
解决方案3
16 已采纳 2011-02-09 12:38:37
Node.js是一个服务器端应用程序，您可以在其中在服务器上运行 javascript。 您想要做的是在客户端上使用require函数。
最好的办法是自己编写require方法，或者使用任何其他使用不同语法（如requireJS ）的实现。
经过一些额外的研究，似乎没有人使用 commonJS 语法为客户端编写了一个 require 模块。 我最终会在不久的将来自己写，我建议你也这样做。
[编辑]
一个重要的副作用是require函数是同步的，因此加载大块 javascript 将完全阻塞浏览器。 这几乎总是一种不需要的副作用。 如果你要这样做，你需要知道你在做什么。 设置了 requireJS 语法，以便它可以异步完成。
解决方案4
9 2020-05-30 17:57:09
当涉及到 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>
应用程序.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 模块 (ESM) 支持将构建的文件直接提供给浏览器
换句话说，您可以使用 npm 包，从而允许您在客户端应用程序中使用“节点模块系统”。
解决方案5
7 2019-03-20 00:38:44
网络包
我会推荐Webpack ，它可以自动加载节点模块、依赖项、缩小等等。
安装
要在你的项目中使用节点模块，首先在你的机器上安装node.js。 包管理系统NPM应该一路安装。 如果您已经安装了 node.js，请将 Node.js 和 NPM 更新到最新版本。
用法
初始化
在代码编辑器中打开您的项目，并通过在命令行中键入npm init -y来npm init -y 。 接下来，通过键入npm install webpack webpack-cli --save-dev在本地npm install webpack webpack-cli --save-dev 。 （ --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 语句。 例如，如果你想导入lodash ，只需输入import _ from 'lodash'; 并继续在index.js文件中使用_ 。
注意：不要忘记先安装 node 包，然后再在 JS 中导入它。 要在本地安装lodash ，请输入npm install lodash 。 Lodash 将自动保存到package.json生产依赖项中
运行 Webpack
最后，通过在命令行中键入npx webpack webpack 来运行 webpack。 您应该会在dist文件夹中看到main.js为您生成的 main.js。
其他资源
以上指南仅提供了最基本的 Webpack 使用方法。 要探索更多有用的用例，请转到 Webpack 的官方教程。 它提供了关于资产管理、输出管理、开发和生产指南等主题的极其全面的教程。
参考
解决方案6
3 2012-07-12 19:47:47
如果您想使用与 Node.js 相同的样式模块为浏览器编写代码，请尝试Webmake 。 还看一下以这种方式构建的应用程序的简单原型： SoundCloud Playlist Manager
解决方案7
0 2013-10-25 18:29:54
客户端有一个很好的类似 node.js 的库。 这叫做总结。 检查一下kamicane/总结
如何在 https 模块上使用 await 以在 node.js 中获得响应
[英]How to use await on https module to get response in node.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.