如何在客户端使用node.js模块系统

时间：2011-02-09 12:32:51

标签： 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选项）。 当我想在我自己的javascript中使用require函数时，它说它未定义。

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

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

7 个答案:

答案 0 :(得分：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
    •   
  • 咖啡脚本也有效！
    •   

答案 1 :(得分：16)

正如马塞洛所说......

Browserify

Browserify

它神奇地让你这样做。

答案 2 :(得分：15)

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

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

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

[编辑]

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

答案 3 :(得分：5)

关于RequireJS，可接受的答案是正确的。但是，快进到2020年，现在除IE <= 11之外，每个浏览器上几乎都有ES modules。

因此，回答您的问题“如何在客户端上使用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软件包，从而允许您在客户端应用程序中使用“节点模块系统”。

答案 4 :(得分：3)

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

答案 5 :(得分：1)

Webpack

我建议使用Webpack，它可以自动执行节点模块的加载，依赖项，最小化等等。

安装

要在项目中使用节点模块，请首先在计算机上安装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对其进行配置）

重构依赖项

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

注意：不要忘了先将节点程序包安装到JS中。要在本地安装lodash，请键入npm install lodash。 Lodash将自动保存到package.json

中的生产依赖项中

运行Webpack

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

其他资源

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

参考

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

答案 6 :(得分：0)

客户端有一个很好的需要node.js的库。它被称为包装。查看kamicane/wrapup

相关问题
最新问题