1. 什么是npm包？
npm是node.js的包管理工具，其通过创建和共享node.js模块，使JavaScript的代码复用、共享和分发变得更加容易。npm的包（packages）是指含有一定结构和功能的代码，通过npm命令安装后可以在项目中使用。
2. 什么是nv-annotorious-bower？
nv-annotorious-bower是一个基于annotator.js的jQuery插件，它提供了一个不错的基础工具包，以创建注释和注解的功能，这使得Web上可以开发一个强大的注释系统。
3. nv-annotorious-bower的安装和使用
安装
在使用nv-annotorious-bower前，你需要确保你已经安装了npm，然后你可以使用下列命令从npm上安装nv-annotorious-bower：
$ npm install nv-annotorious-bower
使用
使用nv-annotorious-bower相当简单，将下列代码放入HTML文件的头部（head）中：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nv-annotorious-bower/dist/annotorious.min.css"/> <script src="https://cdn.jsdelivr.net/npm/nv-annotorious-bower/dist/annotorious.min.js"></script>
接下来，你可以在需要使用注释功能的图片上调用nv-annotorious-bower：
const anno = Annotorious.init({
image: '<img src="your-image.jpg">',
readOnly: false
});其中，image可以指定图片的URL或者是已经加载好的图片元素。readOnly可以设置是否允许用户创建和编辑注释。
示例代码
HTML文件：
-- -------------------- ---- -------
--------- -----
------
------
---------------------------------------
----- ---------------- -----------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
-------
------
---- ---------------------
---- ------------- ------------------------------------
------
--------
----- ---- - ------------------
------ ------------
--------- -----
---
---------
-------
-------4. 总结
使用npm包nv-annotorious-bower可以方便地创建基于web的注释系统。在本文中我们介绍了nv-annotorious-bower的安装和使用，并提供了示例代码。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9b3d1de16d83a66dd1