如何在clientside上使用node.js模块系统
Nic*_*rts 36 javascript node.js
我想在客户端javascript应用程序中使用CommonJS模块系统.我选择nodejs作为实现,但找不到关于如何使用nodejs clientside的任何教程或文档,即不使用node application.js
我在我的html页面中包含了这样的node.js:
<script type="text/javascript" src="node.js"></script>
请注意,我没有在本地计算机上创建nodejs,无论如何我都在Windows上(我知道Cygwin选项).当我想require在我自己的javascript中使用该函数时,它表示它未定义.
var logger = require('./logger');
我的问题是,是否可以使用这样的nodejs？
Mar*_*rte 35
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()用于节点模块和npm包**
Browserify会在您指定的挂载点提前捆绑所有内容.没有这个ajaxy模块加载业务.
更多功能:
- 以递归方式捆绑npm模块的依赖关系
- 将es5-shim用于糟透了的浏览器
- {min,ugl} ification的过滤器
- 咖啡脚本也有效!
- 我已经使用了Browserify一段时间了.真是头痛......尝试Head JS (4认同)
- @BMiner,您应该将其添加为单独的答案.所以人们可以投票/投票. (3认同)
Ray*_*nos 15
Node.js是一个服务器端应用程序,您在服务器上运行JavaScript.你想要做的是使用require客户端上的功能.
您最好的选择是require自己编写方法或使用任何使用不同语法(如requireJS)的其他实现.
做了一些额外的研究后,似乎没有人使用commonJS语法为客户端编写了一个require模块.我最终会在不久的将来写自己的,我建议你也这样做.
[编辑]
一个重要的副作用是require函数是同步的,因此加载大块的javascript将完全阻止浏览器.这几乎总是一种不必要的副作用.如果你要这样做,你需要知道你在做什么.设置了requireJS语法,以便可以异步完成.
- @dfuse我会看看是否可以将写入`require.js`的客户端编码移到我的待办事项列表中.一旦我写完它,我会告诉你的. (2认同)
当涉及到 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 包，从而允许您在客户端应用程序中使用“节点模块系统”。
网络包
我会推荐Webpack，它可以自动加载节点模块、依赖项、缩小等等。
安装
要在你的项目中使用节点模块，首先在你的机器上安装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>标签之前。要导入其他节点模块，请在文件开头添加import 语句index.js。例如，如果您想导入lodash，只需键入import _ from 'lodash';并继续_在您的index.js文件中使用 。
注意：不要忘记先安装 node 包，然后再在 JS 中导入它。要lodash在本地安装，请键入npm install lodash. Lodash 将自动保存到您的生产依赖项中package.json
运行 Webpack
最后，通过npx webpack在命令行中键入来运行 webpack 。您应该会main.js在distWebpack 为您生成的文件夹中看到。
其他资源
以上指南仅提供了最基本的 Webpack 使用方法。要探索更多有用的用例，请转到Webpack的官方教程。它提供了关于资产管理、输出管理、开发和生产指南等主题的极其全面的教程。
参考
https://webpack.js.org/guides/getting-started/
| 归档时间： |
|
| 查看次数： |
53044 次 |
| 最近记录： |