Javascript 如何在浏览器中要求 CommonJS 模块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7576001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to require CommonJS modules in the browser?
提问by travelboy
What is the best way to load CommonJS modules as client-side javascript in the browser?
在浏览器中将 CommonJS 模块加载为客户端 javascript 的最佳方法是什么？
CommonJS modules put their functionality in the module.exportsnamespace and are usually included using require(pathToModule)in a server-side script. Loading them on the client cannot work the same way (require needs to be replaced, asynchronousness needs to be taken into account etc.)
CommonJS 模块将它们的功能放在module.exports命名空间中，并且通常包含require(pathToModule)在服务器端脚本中。在客户端加载它们不能以相同的方式工作（需要替换 require，需要考虑异步等）
I have found module loaders and other solutions: Browserify, RequireJS, yabble, etc. or ways to simply alter the modules. What do you consider the best way and why?
我找到了模块加载器和其他解决方案：Browserify、RequireJS、yabble 等，或者简单地更改模块的方法。你认为最好的方法是什么，为什么？
采纳答案by gillesruppert
I have used requirejsextensively in the past (implementation on BBC iPlayerin 2010) and it works well. It can handle CommonJS modules, but it needs an additional wrapper, which I find annoying. If you want to use those modules in node.js as well, you need to use requirejs on the server side as well, which I don't like doing since it is not idiomatic node.js JavaScript.
我过去曾广泛使用过requirejs（2010 年在BBC iPlayer上实现）并且效果很好。它可以处理 CommonJS 模块，但它需要一个额外的包装器，我觉得这很烦人。如果你也想在 node.js 中使用这些模块，你也需要在服务器端使用 requirejs，我不喜欢这样做，因为它不是惯用的 node.js JavaScript。
I have used webmakeand browserifyin the past year on a few projects. Initially, the compilation step put me off, but having used it extensively this year, I can say that this is not an issue.
我已经使用webmake和browserify在过去一年中的几个项目。最初，编译步骤让我失望，但今年广泛使用它，我可以说这不是问题。
Browserify has a watch function included, which works very well. Webmake can be hooked up to a watcher (such as watchr) or, you can use the webmake-middlewaremodule, which can be used as part of an express or connect app. This has the advantage that rather than compiling the JavaScript on each save, it is only compiled when you actually request it. Connectmakes it trivial to create a server (also static), so you could create a tiny static node.js server to serve up your files if you want to develop your frontend without a backend.
Browserify 包含一个监视功能，效果很好。Webmake 可以连接到观察者（例如watchr），或者，您可以使用webmake-middleware模块，该模块可以用作 express 或 connect 应用程序的一部分。这样做的好处是，它不是在每次保存时编译 JavaScript，而是仅在您实际请求时才编译。 Connect使创建服务器（也是静态的）变得微不足道，因此如果您想开发没有后端的前端，您可以创建一个小型静态 node.js 服务器来提供您的文件。
Bonus: no need for a build script as you always deal with the built code.
奖励：不需要构建脚本，因为您总是处理构建的代码。
回答by Bruiser
Here is a comprehensive list of your current options ordered by their respective popularity (number of watchers) on GitHub:
以下是您当前选项的完整列表，按它们在 GitHub 上的受欢迎程度（观察者数量）排序：
Options for use of require() in the browser(Wayback Machine archive)
在浏览器中使用 require() 的选项（Wayback Machine 存档）
回答by Kevin McTigue
What about Browserify? Its description is: "Browser-side require() for your node modules and npm packages" which sounds what you need.
什么Browserify？它的描述是：“用于您的节点模块和 npm 包的浏览器端 require()”，这听起来是您所需要的。
回答by Dmitry Sheiko
CommonJS Compiler https://github.com/dsheiko/cjscWhy? It works fine with nodejs (CommonJs) modules /treat module exactly as nodejs/ and with UMD, brings minimum extra code to the compiled JavaScript, allows exporting globals of 3rd party libraries without touching their code, source maps and a trick that other cannot do:
CommonJS 编译器https://github.com/dsheiko/cjsc为什么？它适用于 nodejs (CommonJs) 模块 /treat module 与 nodejs/ 完全一样，并且使用 UMD，为已编译的 JavaScript 带来最少的额外代码，允许导出 3rd 方库的全局变量而无需触及它们的代码、源映射和其他人无法做到的技巧：
var str = require( "lorem-ipsum.txt" );
console.log( str );
Output:
输出：
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Morbi...
Here the slides https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler
这里的幻灯片https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler
回答by Mariusz Nowak
Webmakeis one of the options. I use it to pack application that is build from over 200 modules of over 20 packages. It works.
Webmake是其中一种选择。我用它来打包由 20 多个包的 200 多个模块构建的应用程序。有用。
If you want to see some example, check: SoundCloud Playlist Manager, it's strictly client-side and built with Webmake
如果您想查看一些示例，请检查：SoundCloud Playlist Manager，它是严格的客户端并使用 Webmake 构建
回答by evilcelery
Can't say I've tried the others you've listed here but I like RequireJS because:
不能说我已经尝试过你在这里列出的其他人，但我喜欢 RequireJS 因为：
- It works in a similar way to CommonJS
- It's easy to use
- It implements some of the upcoming new standards
- You can use it in NodeJS so that you can use the same files in server and client
- It includes a minifier/packer for deploying to producion
- It has plugins. The Text plugin, that lets you load HTML files, is very useful for large apps.
- 它的工作方式与 CommonJS 类似
- 很容易使用
- 它实施了一些即将推出的新标准
- 您可以在 NodeJS 中使用它，以便您可以在服务器和客户端使用相同的文件
- 它包括一个用于部署到生产的压缩器/打包器
- 它有插件。Text 插件可让您加载 HTML 文件，对于大型应用程序非常有用。
