node.js - 您如何知道哪些 Node.js 代码将在浏览器上运行？

Question

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

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

Answer 1

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

• JavaScript modules 是用 JavaScript 编写的 3rdParty 模块(ECMA5、ECMA6 甚至 TypeScript 或 CoffeScript)等；
  • Node 内置模块。这些是 Node Core modules，例如 fs、path、util 等。
  • 名为 Addons 的 native 编译模块是动态链接共享对象，用 C 或 C++ 编写；

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

• Browserify
• Webpack

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

Babel.js 将现代 JavaScript 移植到遗留引擎

以及技巧

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

因为如果你不仅想转换语法，甚至还想转换全局变量(如 Promise)，则需要进行 polyfill，因此你将转译器与具有 babel-polyfill 之类的 polyfill 结合起来

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

• AMD 模块格式
• CommonJS 模块格式

以及不属于必须通过自定义 loaders 捆绑/填充的格式(如果可能)。

也就是说， native 模块不会在浏览器中运行:您无法通过 Webpack 捆绑 native 模块。普通模块可以，但不是全部。这是由于几个原因造成的。有一些特定方法无法“浏览器化”或“webpacked”。我们以fs 为例。你能把这个内置模块放在浏览器中吗？有一些名为 brfs 的抽象，它们是内置 Node api fs.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 选项来排除不支持的 Addons 模块模块等 - 请参阅 here 。

所以你必须查看 list of the transforms，这意味着你可以将此转换应用于 browserify 以获得像上面提到的 fs 转换一样的结果。

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

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