通过npm的前端依赖：它是如何工作的？

Question

我已经通过npm安装了主干网，它被放置在node_modules文件夹中（不在web根目录中）如何将它包含在我的index.html文件中？

Answer 1

可以完全基于CommonJS（即节点式）模块编写前端代码。

如果通过npm安装前端依赖项，则可以使用Browserify之类的包捆绑工具将所有依赖项捆绑到一个文件中。这样，您可以像使用服务器端软件包一样使用依赖于浏览器的软件包：使用Node的require函数。您只需要一个模块（在node_modules目录或常规文件中）并使用它。

浏览器的基本使用非常简单：只需browserify clientcode.js > webroot/clientbundle.js，其中webroot是您的网络根目录。然后在您的html文件中包含clientbundle.js。

clientcode.js应该是客户端的“主”脚本，可与Express app的“app.js”（或类似）相媲美。它可以大到你想要的大小，但你也可以只使用它作为引导代码来运行在其他CommonJS模块中定义的函数。

请注意，您可以轻松地将浏览器依赖项与常规依赖项混合使用。您事先包含的任何脚本（比如非浏览器化的jquery）将成为全局脚本，而browserify不会阻止您访问全局变量。

请注意：基于客户端库通过npm分发的某些软件包（完全）不符合CommonJS规范。有些可能不会导出任何东西，有些可能（意外地）创建全局变量等等。

另见Backbone app with CommonJS and Browserify。

浏览器的一些替代方案：

• https://github.com/michaelficarra/commonjs-everywhere
• https://github.com/medikoo/modules-webmake
• https://github.com/webpack/webpack

我还没试过。

Answer 2

虽然为后端和前端使用npm的想法可能听起来很诱人 - 它确实对我有用 - 尝试Bower或Ender.js而不是前端依赖。我个人更喜欢凉亭，因为我可以更容易地将它包含在我的requireJS模块结构中。它会让你在沮丧的情况下不会起泡。

Answer 3

前端依赖我建议使用Bower。您可以使用许多components，并且它们非常易于设置。