Fatal编程技术网
  • javascript/
  • Javascript 如何在客户端使用node.js模块系统

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

javascript node.js

Javascript 如何在客户端使用node.js模块系统,javascript,node.js,Javascript,Node.js,我想在客户端javascript应用程序中使用CommonJS模块系统。我选择nodejs作为实现，但找不到任何关于如何使用nodejs客户端的教程或文档，即不使用node application.js 我在html页面中包括node.js，如下所示： <script type="text/javascript" src="node.js"></script> 我的问题是，可以这样使用NodeJ吗？Node.js是一个服务器端应用程序，您可以在服务器上运行javascr

我想在客户端javascript应用程序中使用CommonJS模块系统。我选择nodejs作为实现，但找不到任何关于如何使用nodejs客户端的教程或文档，即不使用
node application.js

我在html页面中包括node.js，如下所示：

<script type="text/javascript" src="node.js"></script>
我的问题是，可以这样使用NodeJ吗？

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

您最好自己编写
require
方法，或者使用其他任何使用不同语法的实现，如

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

[编辑]

一个重要的副作用是
require
函数是同步的，因此加载大块javascript将完全阻塞浏览器。这几乎总是一个不必要的副作用。如果你要这么做，你需要知道你在做什么。requireJS语法设置为可以异步执行。

github上的SubStack有一个名为的模块

它将压缩和捆绑您的模块，并将其作为单个js文件交付，但您使用它就像使用Node.js（模块自述中的示例）：


var foo=要求（'./foo'）；
window.onload=函数（）{
document.getElementById（'result'）.innerHTML=foo（100）；
};
foo=
在模块说明中：

Browserify

用于节点模块和npm包的浏览器端require（）**

Browserify在指定的装载点提前绑定所有内容。没有任何ajaxy模块加载业务

更多功能：

  • npm模块的递归捆绑依赖
  • 使用es5 shim处理那些糟糕的浏览器
  • 用于{min，ugl}的过滤器
  • 咖啡剧本也行
如果您想使用与Node.js相同的样式模块为浏览器编写代码，请尝试。再看一下这样构建应用程序的简单原型：

神奇地让您做到了这一点

客户端有一个类似require node.js的库。它叫wrapup。查看它的网页 我建议使用哪种方法来自动化节点模块加载、依赖关系、缩小，等等

装置 要在项目中使用节点模块，请首先在计算机上安装。包管理系统应安装在整个过程中。如果您已经安装了node.js，将node.js和NPM更新至最新版本

用法 初始化 在代码编辑器中打开项目，在命令行中键入
npminit-y
初始化npm。接下来，通过键入
npm install webpack webpack cli--save dev
本地安装webpack。（
--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中的所有
导入，并在
标记前添加
。要导入其他节点模块，请在
index.js
文件的开头添加。例如，如果要导入
lodash
，只需从“lodash”键入
import即可
并继续使用
index.js
文件中的
\ucode>

注意：在JS中导入节点包之前，不要忘记先安装节点包。要在本地安装
lodash
，请键入
npm install lodash
。Lodash将自动保存到
package.json中的生产依赖项中

运行网页包
最后，在命令行中键入
npxwebpack
来运行webpack。您应该会看到通过Webpack在
dist
文件夹中为您生成的
main.js

额外资源
以上指南仅提供了使用Webpack的最基本方法。要探索更多有用的用例，请转到网页的。它提供了关于资产管理、输出管理、开发和生产指南等主题的非常全面的教程

参考文献

对于需求，公认的答案是正确的。但是，快进到2020年，除了IE之外，我们现在几乎所有的浏览器都有了，这是一个遗憾，我真的很喜欢nodejs的语法，requireJS似乎更适合verbose@dfuse我将看看是否可以将客户端编码的write
require.js
移到待办事项列表的更高位置。我写完后会告诉你的。嗯，你关于同步性的评论会让我再次看到requireJSguess@Raynos从未做过…：（@Kayvar做不可能的事很难…；-）我用Browserify已经有一段时间了。多头痛啊。。。试一试头JS@BMiner，你应该加上这个作为一个单独的答案。所以人们可以投上/下票。@marcello你确定这就是Browserify的工作方式吗？根据我的阅读，您不能在其他代码之前在库中添加一个
标记。。。您必须以
main.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>



yourProjectName
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js



<!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>



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 };