转载

通过 npm使用jQuery 插件

翻译自： Using jQuery plugins with npm

上周我们讨论了如何发布jQuery的插件到npm，快速而原始的方式。由于快速和原始，我们的意思是，你可以简单地发布你的模块到npm–没有任何修改–人们就可以使用它。但是一些插件需要做额外的工作，并添加一点点代码，使其可以更容易通过npm基础工具使用。

通过 npm使用jQuery 插件

在这篇文章中，我们将向你展示如何使用快速而原始的方式发布jQuery插件…也就是说，插件无需使用package.json主导文件或者设置一个全局变量,不管他们是否直接在浏览器中使用或者被像Browserify这样的工具捆绑。

在接下来的文章中，我们将向你展示如何更新你的插件来使用npm特有的功能，这使得开发人员更容易使用你的模块（对于你，当你在项目中用你自己的插件上）。我们还将向您展示如何使之与Node，CommonJS的模块系统结合工作，并充分利用模块化，使你的插件更易于维护，更容易。

什么样的插件

这种类型的插件，我们不导出 Node兼容模块（使用CommonJS的模块格式）并且不希望使用这样的模块工作。相反，它只是期望一个jQuery对象（在全局范围内）使用该插件一起工作。

然而，即使一个插件确实知道如何使用Node兼容的CommonJS模块工作，你仍然可以使用我们在这里描述的方法，所以你不必担心搞清楚的区别。我们将在接下来的文章中阐述差异。

我们将开发一个简单的网页，其中使用 tipso 提示插件。你可以在 GitHub 上找到这个demo的最终代码。

多种措施

我们将讨论多种措施。所有使用npm处理前端的资源的不同方法各有优点和缺点。我们希望能帮助你挑选最适合你的团队的开发工作流程的策略。在接下来的文章中，我们将先从最简单的工作流程，并从这里开始建立一个更清洁，更易于维护的工作流程。我们将在本文和以后的文章中讨论你应该考虑的权衡。

我们将在这篇文章中探讨这两种方法：

1.直接包括脚本文件；

2.用Browserify打包文件；

如果你有不同的做法可以评论或在 Twitter上@npmjs

设置你的项目

对于这两种方法，我们需要建立一个项目。

1.创建一个目录

mkdir demo cd demo

2.添加一个 package.json 文件，其内容如下

{   "name": "demo",   "version": "1.0.0" }

3.安装tipso包npm install –save tipso

--save 标记将其作为依赖添加到您的 package.json 文件，在你实际的工作项目中，这是很有用的，它可以更容易地更新你的依赖，并且如果您共享该项目，其他人很容易下载依赖模块。

方法1：直接包括脚本文件

这种方法看起来很熟悉，工作起来也是最简单的，因为它不需要任何额外的工具。你只要添加script标记到你的HTML，src使用.js文件的完整路径就可以了。

1.在根目录创建一个 index.html 文件。

2.添加下面的代码到 body 中。

<span class="title-tipso tipso_style" title="This is a loaded TIPSO!">Roll over to see the tip</span>

3.从CDN添加jQyuer。任何CDN都可以。

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

4.直接创建依赖关系树。

npm dedupe

因为我们在package.json中宣告我们所有的依赖性，所以我们并不真的需要做到这一点，但它是一个很好的做法。

5.添加tipso包的脚本

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

6.添加一个 script.js 脚本文件，使用tipso添加工具提示。

jQuery(function(){   jQuery('.title-tipso').tipso(); });

7.添加tipso的CSS

<link rel="stylesheet" href="node_modules/tipso/src/tipso.css" />

8.在浏览器中打开index.html，鼠标在文本上移动。您应该看到提示弹出一个工具提示。

最终文件类似这样：

<!doctype html> <html> <head> <title>npm and jQuery demo</title> <link rel="stylesheet" href="node_modules/tipso/src/tipso.css" /> </head> <body> <span class="title-tipso tipso_style" title="This is a loaded TIPSO!">Roll over to see the tip</span>  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="node_modules/tipso/src/tipso.js"></script> <script src="script.js"></script> </body> </html>

缺点

这个方法有一些缺点。

1.这种方法可维护性很差。 tipso对jQuery的依赖没有在任何地方定义，除非在开发者的脑子里。如果一个新的开发者接手维护这个项目，或者，如果你6个月后回来维护这个代码，当你需要重新调整网站上的另一部分功能时，不会很明显的表面哪些脚本需要添加。

2.这种方法效率也不高，因为它会产生大量的资源文件请求数。这里文件里有4个请求——script.js,tipso JS,tipso CSS和jQuery（尽管这是从一个CDN的到来，所以很可能是已经缓存）。在这个演示中单独处理每个文件的效率不那么明显，它只有几个文件，但是如果是一个更大的项目呢？

3.你的 node_modules 目录结构可能改变。由于在 index.html 中路径是硬编码的，如果你运行NPM更新或目录移动，您的应用程序将被破坏。这是不太可能发生在这样一个简单的应用中，但如果是一个复杂的项目的话那就不好说了。对于这个问题有解决方法，但是不在这里。

我们将不能够解决问题3，直到我们在接下来的文章中对插件本身作出改进，但我们可以通过使用Browserify工具修复问题1和2，这带来了一些其他的好处。

方法2：用Browserify打包文件

Browserify是一个工具，它使得后端和前端包更容易的使用，然后将所有的JavaScript打包成一个单一的文件，该文件可以包含到你的HTML中。（愚人码头注：Browserify本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。）

例如，用Browserify可以使用 ngraph.generators 和 ngraph.vivasvg 创建一个爆炸点的动画。

除了使你的前端代码更容易地使用npm上127,000+ 的包，Browserify也使得你的团队更容易的模块化方式来开发，从而提高了代码的结构，使得它更容易维护。在接下来的文章中你会看到这个功能。

很多人没有意识到这一点，但即使你正在使用一个不兼容CommonJS的jQuery插件，你仍然可以使用Browserify。

设置Browserify

构建项目时，你使用的Browserify是一个命令行工具。当你运行你的应用程序它并没有加载。这意味着，它应在全局下安装，不作为项目的依赖。npm install -g browserify

如果你得到一个错误，说EACCES，看看我们的文档上的 fixing permissions ，或者使用sudo运行命令。

打包JavaScript

首先，我们要打包正在使用JavaScript。

1.去除 index.html 中现有的 script 和 link 标签，并增加一个 script 标签引用 bundle.js ：

<!doctype html> <html> <head> <title>npm and jQuery demo</title> </head> <body> <span class="title-tipso tipso_style" title="This is a loaded TIPSO!">Roll over to see the tip</span>  <script src="./bundle.js"></script> </body> </html>

bundle.js 文件是Browserify为我们自动生成的。它将是包括所有的JavaScript的包，使用这种方式确保依赖关系能正确传递给依赖于它们的模块。

2.添加的jQuery的依赖。这样可以很容易地 require 其他的 .js 文件。

npm install --save jquery

注意：您可以继续使用script标记来引用jQuery。出于依赖处理的一致性，我们宣告它为依赖（并在下一步骤中引用它），但你可能要一个更具性能优势CDN jQuery。

3.创建一个 entry.js 文件。

global.jQuery = require('jquery'); require('tipso');  jQuery(function(){   jQuery('.title-tipso').tipso(); });

这将是Browserify启动的进入点。这里它会寻找依赖性，并按照依赖关系树知道需要什么样的代码包含到 bundle.js 中。

和在 index.html 中之前的脚本一样。不同的是这一次，不包括jQuery和tipso作为单独的script标记，我们使用Node的 require 功能，让Browserify知道，我们依赖他们。

当浏览器加载时，tipso需要依赖全局的jQuery对象。然而，在Node.js中，我们使用 var 声明的变量是本地模块，而不是全局性的。为了使tipso的依赖，我们需要公开jQuery为一个全局的，因此，我们将其附加到Browserify提供的 global 对象上。

4.告诉browserify在那里可以找到tipso。要做到这一点，添加一个 browser 键到你的 package.json 中。

"browser": {   "tipso": "./node_modules/tipso/src/tipso.js" }

查看上下文. 如果在tipso的 package.json 文件中 main 文件指向 tipso.js 文件，我们不会需要做这一点。我们将在接下来的文章中介绍。

5.运行browserify来创建 bundle.js

browserify entry.js --debug > bundle.js

我们使用 --debug 标记来为打包文件添加source maps。这将使它更容易在浏览器的控制台进行调试。

6.加载 index.html ，然后鼠标移动到文本。你会看到文本弹出，但它不会有很好的泡泡轮廓。这是因为我们还没有将CSS添加回来。

添加CSS

处理前端资源的最佳实践，如CSS文件，仍然在发展中。社区提出了多种解决方案，但没有一个是明显的赢家。通过不同的前端生态系统的项目的问题的讨论，我们将持续关注更好的支持，找出最好的策略给大家，但现在没有完善的办法做到这一点。

我们已经找到了最简单的方法是使用 parcelify ，但你也可能会发现对你而言更好的不同方法。

1.全局下安装parcelify

npm install -g parcelify

2.告诉parcelify在哪里可以找到你所需要的CSS。要做到这一点，添加一个 style 键到你的 package.json 中

"style": [   "./node_modules/tipso/src/tipso.css" ]

查看上下文.

另一个步骤，我们可以通过改变tipso包消除这个，我们将在接下来的文章中看到。

3.运行parcelify来创建 bundle.css

parcelify entry.js -c bundle.css

4.为 bundle.css 添加一个 link 元素到 index.html 中

<link rel="stylesheet" href="bundle.css" />

5.刷新index.html，然后鼠标移动到文本。泡泡轮廓的CSS已经恢复。

使用CDN的jQuery（可选）

在第一种方法中，我们使用了CDN的jQuery源代码。您可能已经注意到，第二种方式没有这么做。相反，它将jQuery打包到 bundle.js 文件中。这意味着， bundle.js 是比较大的文件。

但是，这并不是必须这样做。您可以使用一个叫做 browserify-shim 的工具仍然使用CDN的jQuery。

虽然我们不会涵盖在这里使用，但你可以找到更多关于browserify-shim的 README 。

打包

在这篇文章中，你学会了如何以快速而原始的方式来使用已发布到npm的jQuery插件——在这种方式中，没有使用npm的特殊功能或CommonJS模块。

第一种方法是类似于大多数开发者目前的做法，直接引用脚本,并且跟踪依赖关系——该脚本依赖于哪些其他脚本——基本在开发者自己的脑子里。这种方法也使得产生了更多的请求，这使得网页加载变慢和硬编码的文件名，这意味着，如果你在目录中移动、更新你的库代码和文件，这些硬编码的引用可能会错误。

第二种方法中，使用Browserify打包依赖，通过使用 require 函数，显式依赖将需要的代码包括进来。这使得一个新开发者（或者在6个月）更容易接手维护项目（了解在应用程序中哪些脚本使用的其他部分）。Browserify还合并了JavaScript和CSS文件，如果你有多个脚本和CSS文件，这将有助于更快的加载页面。不幸的是，我们并没有摆脱硬编码文件名的问题。tipso的CSS和JS的路径需要在 package.json 中硬编码。

但是有一个方法可以解决最后一个问题。在接下来的文章中，你会看到，你如何使用npm的特殊功能提什自己的插件，使你的代码更加模块化。

就像我们之前说的，有很多的方式来前端的资源的工作。如果你有很好的工作和其他的解决方案，可以评论或在 Twitter上@npmjs 让我们知道。

翻译水平有限，如有错误欢迎评论拍砖或微博上@愚人码头

正文到此结束