zoukankan      html  css  js  c++  java
  • Bower => 前端开发也有包管理器

    摘要: 一直以来npm,pip等各种包管理器好像都和前端开发没什么太大关系,当然因为nodejs的原因可能感觉npm会亲切一些,不过终归不是针对客户端的包管理工作,所以Bower的出现确实让人眼前一亮.

        最近看到一个专门针对前端的包管理工具Bower,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。实际上angularjs的种子项目就是用它的,看到了吗,它是专门针对客户端资源的,也就是说它管理的基本上都是前端工程师使用的东东.

        Bower是用于web前端开发的包管理器。对于前端包管理方面的问题,它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型,这样更利于使用更合适的构建工具。Bower没有系统级的依赖,在不同app之间也不互相依赖,依赖树是扁平的。

        Bower运行在Git之上,它将所有包都视作一个黑盒子。任何类型的资源文件都可以打包为一个模块,并且可以使用任何规范(例如:AMD、CommonJS等)。

        介绍完了Bower说一下它能给我们带来什么好处?

        1. 节省时间。为什么要学习Bower的第一个原因,就是它会为你节省寻找客户端的依赖关系的时间。每次我需要安装jQuery的时候,我都需要去jQuery网站下载包或使用CDN版本。但是有了Bower,你只需要输入一个命令,jquery就会安装在本地计算机上,你不需要去记版本号之类的东西,你也可以通过Bower的info命令去查看任意库的信息。

        2. 脱机工作。Bower会在用户主目录下创建一个.bower的文件夹,这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java,Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中 —— 一个在的应用程序文件夹,另一个在用户主目录下的.bower文件夹。因此,下一次你需要这个仓库时,就会用那个用户主目录下.bower中的版本。

        3. 可以很容易地展现客户端的依赖关系。你可以创建一个名为bower.json的文件,在这个文件里你可以指定所有客户端的依赖关系,任何时候你需要弄清楚你正在使用哪些库,你可以参考这个文件。

        4. 让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序,为了安装新版本,你只需要运行一个命令,bower会自动更新所有有关新版本的依赖关系。

        安装Bower

        Bower依赖Node 和 npm。通过npm 安装到全局环境中:

        npm install -g bower

        使用

        安装之后,可以通过bower help命令可以获取更多帮助信息。了解了这些 信息就可以开始了。

        安装包以及其依赖的包

    # Using the dependencies listed in the current directory's bower.json
    bower install
    # Using a local or remote package
    bower install <package>
    # Using a specific Git-tagged version from a remote package
    bower install <package>#<version>

         所有包都将默认安装到components目录中。 不建议直接修改此目录中的内容。

        执行bower list命令可以列出所有本地安装的包。

        如果你不是在创建一个被其他人使用的包(也就是说,你在构建自己的web应用), 那就应当将所有的已经安装的包纳入源码管理中。

       查找包

    bower search [<name>]

       使用包

       做简单的使用方式就是通过script 标签直接引入已经安装的包:

    <script src="/bower_components/jquery/index.js"></script>

       对于更复杂的项目,你可能更希望合并所有脚本或者使用模块加载器(module loader)。 Bower只是一个包管理器,不过你可以使用很多其他工具 -- 例如 Sprockets 和 RequireJS -- 这些都能帮你完成你所希望的工作。

        卸载包

    bower uninstall <package-name>

        配置Bower.json

        首先,必须在项目的根目录下创建一个JSON文件 -- 默认是bower.json,然后指定所有的依赖。这和 Node所使用的package.json文件或者Ruby中的Gemfile文件很类似,并且有助于锁定项目的依赖关系。

        还可以通过以下命令,进入交互式界面创建一个bower.json文件:

    bower init

        文件定义了几个参数:

    name (required): The name of your package.
    
    version: A semantic version number (see semver).
    
    main [string|array]: The primary endpoints of your package.
    
    ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.
    
    dependencies [hash]: Packages your package depends upon in production.
    
    devDependencies [hash]: Development dependencies.
    
    {
      "name": "my-project",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<name>": "<version>",
        "<name>": "<folder>",
        "<name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }

        更多内容可以去看看官网http://bower.io/

  • 相关阅读:
    NotFoundHttpException
    postMan
    Extjs win
    Extjs toolbar 如何添加竖杆分隔符
    Extjs iconCls 的用法
    b站Java基本语法4之进制转换
    b站Java基本语法4之基本数据类型的运算规则
    b站数据库课2之连接查询
    b站Java尚硅谷0
    b站数据库课1之分组函数分组查询
  • 原文地址:https://www.cnblogs.com/duanweishi/p/5984030.html
Copyright © 2011-2022 走看看