Javascript库使用require(),但我没有或使用nodeJS?

我遇到了几个使用这个require()函数的JavaScript项目和库,以便包含其他文件,如下所示:

require('somefile') 

我从来没有听说过,显然这是node.js,我没有和不使用的东西。

我只是打算在我自己的网站中使用这些JavaScript库,但是我看到了各种涉及“npm”的指令(无论这可能是什么)。 然后有一个被称为required.js的替代品,但似乎使用不同的语法,如强制使用require([…])或其他东西,而我需要包括的项目只需要(… …) )。

什么是最简单的方法来处理这个需要(…)在正则html5网站中使用JavaScript项目的东西? (即所有应该运行客户端)


另外:我已经尝试require.js,但似乎没有工作。 例如,somelibrary.js中的第一行是这样的:

 var assert = require('assert') 

当我以前包括require.js,然后somelibrary.js,我得到这个错误:

未捕获exception:错误:模块名称“assert”尚未加载上下文:_。 使用require([])

这发生在任何包含require()


另一个补充:我注意到人们提到“浏览”。 我试图包括的一些js项目也推荐这个。 显然这应该生成一个可以使用的.js文件,我可以包括。 但

  1. 他们为什么不直接发布这个browserified .js? 我有什么需要自己编译的原因吗? 它应该是所有浏览器或网站通用的东西,对吧?

  2. 这browserify的东西,这显然是为了避免node.js,实际上似乎需要node.js本身(说明都提到“npm -g install browserify”等)

理想情况下,图书馆应根据其环境支持以下内容。 比方说你正在使用一个名为“MyLib.js”的库。

未检测到模块加载器

 window.MyLib 

需要检测到

 define(['MyLib'], function (MyLib) { // Do something return {}; }); 

CommonJS检测到,像节点或使用browserify或凉亭

 var MyLib = require('MyLib'); 

并不是所有的libs都符合这个,但他们应该。 也许你在看的库只支持Node。 看看jQuery的源代码,你会看到如下的东西:

 if ( typeof module === "object" && typeof module.exports === "object" ) { // For CommonJS and CommonJS-like environments where a proper window is present, // execute the factory and get jQuery // For environments that do not inherently posses a window with a document // (such as Node.js), expose a jQuery-making factory as module.exports // This accentuates the need for the creation of a real window // eg var jQuery = require("jquery")(window); // See ticket #14549 for more info module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { factory( global ); } 

Node.js现在用来pipe理JavaScript项目,即使项目是客户端。 例如,Grunt,Bower,Browserify,Gulp和其他许多构build工具都可以在Node.js上运行,即使您可以在客户端项目中使用它们。 使用这些工具不会使您的项目依赖于生产中的Node。 节点仅用于开发。 要安装这些工具,需要使用包pipe理器npm。 像Maven或Ivy一样,npm将通过从互联网上下载来安装软件包及其依赖项。

安装指令涉及npm的库是为了在Node中使用,但是可以在用Browserify转换后在浏览器中使用。 使用npm下载库,然后使用Browserify(使用npm安装,因为它本身在节点上运行)将其转换为浏览器样式。 你应该得到一个你可以在客户端项目中导入的JavaScript文件。

特别针对浏览器的库通常将Bower称为安装方法而不是npm。 Bower也是一个软件包pipe理器,但它被devise为下载和安装为浏览器编写的库,而不是Node。 如果您想要的库在Bower上可用,您可以使用bower install <lib>下载它的所有依赖项。 Bower会将所有文件放在当前目录的bower_components文件夹中。 然后,您可以将这些文件复制到您的项目,或使您的项目直接从这个文件夹中导入它们。

因此,browserify只是一个工具,可以在浏览器中使用节点模式。 是的,你需要安装node.js才能使用npm和browserify。 但是这些时候,你需要node.js来获得大部分的前端工具集。

npm中充满了使用JavaScript编写的模块,并且也在浏览器中运行。 通过浏览器,您可以在浏览器中使用这些模块。

它通过填充整个require机制并使其在浏览器中工作。 这也意味着你可以在模块中组织你的代码:

 // add.js module.exports = function(x, y) { return x + y; } // app.js var add = require('./add.js'); var result = add(7, 8); 

现在你可以通过运行browserify app.js -o bundle.js来生成你的包(你需要包含在你的html中的唯一脚本)。

如果您不喜欢--standalone方法,则还可以使用--standalone 选项以UMD格式生成JavaScript文件。 你可以简单地把它包含在你的html中,并且在之前的例子中用window.add来使用它。

require语句由require.js处理,可以在JavaScript环境中独立使用。 这是一个模块加载器,可以优化浏览器中的加载依赖关系。 有一个Node.js的实现,但这并不意味着你必须使用Node,你可以在你的项目中包含require。

(ps:npm是Node Package Manager ,除非你使用Node,否则对你的项目是不必要的,它简化了JavaScript节点模块到项目中的包含。