你怎么知道 Node.js 代码会在浏览器上 运行?
How do you know what Node.js code will run on the browser?
我正在学习如何使用 Flux,我在文档中遇到了以下行:"We can use Node's EventEmitter to get started with a store."
我知道您可以使用 Browserify 之类的东西来进行捆绑和缩小,获取 Node 代码必须生成的捆绑浏览器兼容的 JS 文件的所有依赖项。但是现在困扰我的是你怎么知道你可以用什么来做这件事。我们如何知道我们可以在浏览器中使用哪些 Node 代码?
所以,首先让我们考虑一下在节点中你有
- 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,所以你将转译器与 polyfill 结合起来,比如 babel-polyfill
最后,我们有不同类型的模块设计模式(模块格式)要为捆绑过程处理:
以及不属于那些必须 bundled/shimmed 的格式 - 在可能的情况下 - 通过自定义 loaders.
也就是说,原生模块不会 运行 在浏览器中:您不能通过 Webpack 捆绑原生模块。普通模块会,但不是全部。这是由于几个原因。有一些特定的方法不能"browserified"或"webpacked"。我们以fs
为例。你能把这个内置模块放在浏览器中吗?有一些叫做 brfs 的抽象,它们是内置节点 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 后端时,你必须做机会主义的设计选择来设计共享 modules/library 在这两种环境中都会 运行,所以在某些时候是 shimmed/packed,比如对象模型,应用程序逻辑等,其他将处理文件系统 I/O 或将使用本机插件的模块,因此只能在服务器中工作,可以通过包装器打包,但行为看起来会有所不同,因为我们已经在上面的 fs
示例中看到了特定于 Web 的模块,所以这是一个设计问题。
可以添加关于网络模块的注释,即节点 http
、https
,这要归功于像节点 request will run everywhere or using specific transforms like http-browserify.
这样的库抽象
我正在学习如何使用 Flux,我在文档中遇到了以下行:"We can use Node's EventEmitter to get started with a store."
我知道您可以使用 Browserify 之类的东西来进行捆绑和缩小,获取 Node 代码必须生成的捆绑浏览器兼容的 JS 文件的所有依赖项。但是现在困扰我的是你怎么知道你可以用什么来做这件事。我们如何知道我们可以在浏览器中使用哪些 Node 代码?
所以,首先让我们考虑一下在节点中你有
- JavaScript modules 是用 JavaScript(ECMA5、ECMA6 甚至 TypeScript 或 CoffeScript)等编写的 3rdParty 模块;
- 节点内置模块。这些是节点 Core modules,例如
fs
、path
、util
等 - 名为 Addons 的本机编译模块是 用 C 或 C++ 编写的动态链接共享对象;
- 节点内置模块。这些是节点 Core modules,例如
那么你就有了打包器/模块打包器
转译器,即通常会处理语法转换的源到源编译器,例如
Babel.js 将现代 JavaScript 替换为旧引擎
和技巧
- ECMA5 Shim 以支持旧版 JavaScript 引擎
- HTML5 Cross-Browser Polyfills
因为如果你不仅要转换语法,还要转换全局变量(比如 Promise),你需要做 polyfill,所以你将转译器与 polyfill 结合起来,比如 babel-polyfill
最后,我们有不同类型的模块设计模式(模块格式)要为捆绑过程处理:
以及不属于那些必须 bundled/shimmed 的格式 - 在可能的情况下 - 通过自定义 loaders.
也就是说,原生模块不会 运行 在浏览器中:您不能通过 Webpack 捆绑原生模块。普通模块会,但不是全部。这是由于几个原因。有一些特定的方法不能"browserified"或"webpacked"。我们以fs
为例。你能把这个内置模块放在浏览器中吗?有一些叫做 brfs 的抽象,它们是内置节点 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 后端时,你必须做机会主义的设计选择来设计共享 modules/library 在这两种环境中都会 运行,所以在某些时候是 shimmed/packed,比如对象模型,应用程序逻辑等,其他将处理文件系统 I/O 或将使用本机插件的模块,因此只能在服务器中工作,可以通过包装器打包,但行为看起来会有所不同,因为我们已经在上面的 fs
示例中看到了特定于 Web 的模块,所以这是一个设计问题。
可以添加关于网络模块的注释,即节点 http
、https
,这要归功于像节点 request will run everywhere or using specific transforms like http-browserify.