你怎么知道什么 Node.js 代码会在浏览器上运行？答案

【问题标题】：How do you know what Node.js code will run on the browser?你怎么知道什么 Node.js 代码会在浏览器上运行？
【发布时间】：2016-11-30 22:00:48
【问题描述】：

我正在学习如何使用 Flux，我在文档中遇到了以下行：“我们可以使用 Node 的 EventEmitter 来开始使用商店。”

我知道您可以使用 Browserify 之类的东西来进行捆绑和缩小，获取 Node 代码必须的所有依赖项，以使捆绑的浏览器兼容 JS 文件。但现在困扰我的是你怎么知道你可以用什么来做这件事。我们如何知道允许在浏览器中使用哪些 Node 代码？

【问题讨论】：

节点代码在浏览器中运行？ nodejs 是服务器端运行时。如果您的意思是节点模块，那么您可以检查 package.js 并确保它没有特定于服务器的依赖项
通常你会重用与框架无关的 js 并将节点特定的代码留在服务器上

标签： node.js reactjs browserify client-side flux

【解决方案1】：

所以，首先让我们考虑一下，当你在节点中时

JavaScript modules 是用 JavaScript（ECMA5、ECMA6 甚至 TypeScript 或 CoffeScript）等编写的 3rdParty 模块；
- 节点内置模块。这些是节点Core modules，如fs、path、util 等。
- 称为Addons 的本机编译模块是动态链接的共享对象，用 C 或 C++ 编写；

然后你就有了打包器/模块捆绑器

转译器，即源到源编译器，通常会处理类似的语法转换

Babel.js 将现代 JavaScript 移植到旧版引擎

技巧

ECMA5 Shim 支持旧版 JavaScript 引擎
HTML5 Cross-Browser Polyfills

因为如果您不仅要转换语法，还要转换全局变量（如 Promise），则需要使用 polyfill，因此您需要将转译器与具有 babel-polyfill 之类的 polyfill 结合起来

最后，我们有不同类型的模块设计模式（模块格式）来处理捆绑过程：

AMD模块格式
CommonJS模块格式

以及不在那些必须捆绑/填充的格式中 - 在可能的情况下 - 通过自定义 loaders。

也就是说，原生模块不会在浏览器中运行：你不能通过 Webpack 捆绑原生模块。普通模块会，但不是全部。这是由于几个原因。有一些特定的方法不能“浏览”或“webpacked”。我们以fs 为例。你能把这个内置模块放在浏览器中吗？有一些称为brfs 的抽象，是内置节点apifs.readFileSync() 和fs.readFile() 的转换，所以你会这样做

$ browserify -t brfs example/main.js > bundle.js

得到

var fs = require('fs');
var html = fs.readFileSync(__dirname + '/robot.html', 'utf8');
console.log(html);

这不适用于 npm 模块丛林中的每个非内置模块，因此 WebPack 有一个 module.noParse 选项来排除插件模块、不支持的模块等 - 请参阅 here 。

所以您必须查看list of the transforms，这意味着您可以将此转换应用于browserify，以获得类似于上述fs 的转换。

也就是说，你怎么知道某个模块会在浏览器中运行？当您设计您的 Web 应用程序和 Node 后端时，您必须进行机会主义设计选择来设计将在两种环境中运行的共享模块/库，因此在某些时候被填充/打包，例如对象模型、应用程序逻辑等，其他将处理文件系统 I/O 或将使用本机插件的模块，因此只能在服务器中工作，通过包装器进行打包是可能的，但行为看起来会有所不同，正如我们在上面的 fs 示例中所见，以及特定于网络的模块，所以这是一个设计问题。

可以添加关于网络模块的注释，即节点 http、https，这要归功于像节点 request 这样的库抽象，它们将在任何地方运行或使用特定的转换，如 http-browserify。

【讨论】：