npm包：bower-installer-JavaScript中文网-JavaScript教程资源分享门户

npm包：bower-installer

前端开发中，我们常常需要使用到各种各样的第三方库，如 jQuery、Bootstrap、Angular等。这些库通常都是以框架的形式打包上传到了网络上，我们可以直接使用浏览器访问相应的链接进行下载。但是，每次手动下载、解压、重命名等操作很繁琐，而且不便于批量管理。

这时候，我们可以使用npm的一个工具包——bower-installer，轻松实现对第三方库的管理和安装。

安装

使用npm进行安装：

npm install -g bower-installer

使用

$ mkdir my_new_project
$ cd my_new_project

初始化npm

$ npm init

接下来会有一些列配置项需要填写，填完之后会生成一个package.json文件

使用bower安装需要的依赖库，如 jQuery 和 Bootstrap：

$ bower install jquery bootstrap

安装完成后在目录下会生成文件夹 bower_components

安装bower-installer

$ npm install --save-dev bower-installer

在项目的根目录下新建一个bower.json文件并配置需要安装的库

{
  "name": "my_new_project",
  "dependencies": {
    "jquery": "2.1.4",
    "bootstrap": "3.3.5",
    "owl-carousel": "1.3.3"
  }
}

修改 package.json 文件：

在devDependencies中添加bower-installer

-- -------------------- ---- -------
-
  ------- -----------------
  ---------- --------
  -------------- ---
  ------- -----------
  ---------- -
    ------- ----- -------- -- ---- ----------- -- ---- --
  --
  ------------------ -
    ------------------ --------
  --
  --------- ---
  ---------- -----
-

配置bower-installer-json文件

因为bower-installer默认只是将文件复制到目录下，并不正确引用文件。

-- -------------------- ---- -------
-
  ------ -
    --------- -----------------------------------------
    -------------- - ------------------------------------------------
    ------------ -
      ----------------------------------------------------
      -------------------------------------------------
    -
  --
  ---------- -
    -------- -----
    --------------------- -----
    ---------------- -----
    ------- -----
  -
-

修改package.json中的"scripts"属性：

"scripts": {
    "postinstall": "./node_modules/bower-installer/bower-installer.js"
  },

使用 npm进行安装和配置：

$ npm install

$ npm run postinstall

查看目录结构，可以发现 bower_components中的文件已经被正确引用到了需要引用的地方。

示例代码

-- -------------------- ---- -------
--------- -----
------
------
    ----------------------------------
    ---- -------- ---
    ----- ---------------- -------------------------

    ------- ----------------------------
    ------- -------------------------------
-------
------
    ---------- -----------
-------
-------

总结

使用npm包 bower-installer，可以非常方便地管理前端开发中所需要的第三方库。通过上述示例代码，相信各位读者已经掌握了如何使用bower-installer进行管理和安装。好的前端开发人员，应该一直保持学习和实践的热情，不断提高自己的技术水平。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/61827