结合使用Browserify和JQuery-“真正"是什么意思? [英] Using Browserify with JQuery - what does it 'really' mean?
问题描述
JavaScript的新手，等等.我想做一个纯HTML/Javascript项目.我看了一下requireJS，从我的阅读中看来，似乎有些项目经历了将他们的requireJS项目切换为node/browserify项目的痛苦.
New to javascript, etc. I wanted to do a pure HTML/Javascript project. I looked at requireJS, and from what I read, it seemed to me that a few projects went through the pain of switching their requireJS project to node/browserify projects.
所以我想我只是从一个node/browserify项目开始.
So I thought I just start with a node/browserify project.
我有限的理解是，当您浏览项目时，它基本上将依赖项与javascript打包在一起.
My limited understanding is that when you browserify a project, it basically packages the dependencies along with your javascript.
问题对
-
它仅创建一个文件吗?
Does it create just one file?
如果创建多个文件，那么如果多个文件依赖于同一项目会发生什么? (例如lodash)?它是否附加了所需的源代码 项目多次?
If it creates multiple files, then what happens if multiple files depend on the same project (such as lodash)? Does it append the source code of the required project multiple times?
如果我正在使用这样的浏览器端库怎么办 作为JQuery ...在这种情况下，根据文档，看来我 将需要使用jsdom.当我用浏览器对此进行处理时会发生什么?是 它比仅使用jquery更昂贵?
What if I'm using browser side library such as JQuery...in this scenario, according to the docs, it seems that I would need to use jsdom. What happens when I browserify this? Is it more expensive than just using jquery?
推荐答案
Node.js和jQuery:
Node.js与浏览器之间的一个重要区别是Node.js 只是:
One important distinction between Node.js and a browser is that Node.js is just a:
它只是意味着它允许您执行javascript代码.浏览器还具有自己的JS运行时，以在客户端上执行脚本，并且另外还提供了平均值这就是文档对象模型(DOM).
it simply means that it allows you to execute javascript code. Browsers also have their own JS runtime to execute scripts on the client side and in addition provide a mean "for representing and interacting with objects in HTML, XHTML, and XML documents." and that is the Document Object Model (DOM).
在Node.js中没有HTML文件，您只需要处理JS代码，因此在Node.js中使用jQuery毫无意义，自jQuery起:
In Node.js there are no HTML files and you just have to do with JS code, thus using jQuery in Node.js doesn't make any sense, since jQuery:
使用易于使用的API(可在多种浏览器中使用)，使HTML文档的遍历和操纵，事件处理，动画和Ajax等操作变得更加简单.
makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Node.js和浏览器验证:
Node.js提供了一个模块加载系统，该模块允许您使用require关键字.因此，任何包含require代码的JS代码都无法在浏览器中执行，因为直到ECMA5为止，都没有内置的模块加载机制.
Node.js provides a module loading system which allows you to include other modules using the require keyword. So any JS code containing the require code cannot be executed in the browser, since up to ECMA5 there are no built-in module loading mechanisms.
Browserify只是模拟require关键字，并允许您在浏览器中使用它，如
Browserify simply mocks the require keyword and allows you to make use of it also in browsers, as explained here:
Browserify使用术语入口文件来描述它将在哪里开始读取依赖关系图，并且其输出称为捆绑.
Browserify uses the term entry file(s) to describe where it will start reading a dependency graph, and its output is referred to as a bundle.
项目的Node.js?:
由于您的项目旨在在浏览器中运行(而不是在服务器上)，因此无需迁移到Node.js. 但是，您可以使用Nodejs更好地维护您的项目:
Since your project is aimed to be run inside a browser (and not on a server) there is no need to migrate to Node.js. However, you could use Nodejs to better maintain your project:
- 将项目分隔为开发中的模块，并使用browserify创建一个捆绑文件以进行生产.
- 使用许多预处理器，然后进行编译(例如， coffeeScript ， mocha ， gulp )
- 等...
- Seperate the project in modules in development and create a single bundle file with browserify for production.
- Use a number of preprocessors, and compiles (e.g. coffeeScript, Less, etc)
- Test your modules (e.g mocha, jest)
- Use a build system (e.g gulp)
- etc...
然后，对模块进行测试(并编译了Coffeescript！)，您只需让Browserify来创建您的main.bundle.js并将其像这样导入到您的产品中即可:
And after you have, tested your modules (and compiled your coffeescript!) you just let browserify to created your main.bundle.js and just import it like this in your production:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="main.bundle.js"></script>
这篇关于结合使用Browserify和JQuery-“真正"是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
