使用 npm 来组织 jQuery 插件

a year

jQuery 比较原始的方法是去官网下载文件,然后一个一个添加路径,管理上十分不便,在一段时间内 Bower 成了一个管理器,当然作用微小,仅仅是充当了下载管理的角色,在组织代码上依旧十分麻烦。

现在 jQuery 插件都是提交到 npm,需要设置 package.json

{
  "name": "jquery-waterfall",
  "version": "1.0.7",
  "description": "jQuery waterfall Plugin",
  "main": "js/jquery.waterfall.min.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iMuFeng/Waterfall.git"
  },
  "keywords": [
    "jquery",
    "waterfall"
  ],
  "author": "Mufeng",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iMuFeng/Waterfall/issues"
  },
  "homepage": "https://github.com/iMuFeng/Waterfall#readme"
}

注册 npm 帐号初始化之后,npm publish 就可以提交到 npm 了,jQuery Waterfall 现在可以用 npm 来下载了:

$ npm install --save jquery
$ npm install --save jquery-waterfall

在 main.js 文件可以像 NodeJS 一样 require 加载依赖:

global.jQuery = require('jquery');
require('jquery-waterfall');

var $ = global.jQuery;

$(function () {
  $('#container').waterfall({
    selector:'.post-home',
    columnCount:4,        
    columnWidth:300,      
    isResizable:false,    
    end:function(){
      alert('done')
    }
  })
});

main.js 现在是无法在浏览器使用的,需要用 Browserify 将其转换成浏览器可以加载的 compiled.js 文件,通过下面的命令全局安装:

$ npm install -g browserify

接着用 将 main.js 转换成 compiled.js

$ browserify main.js -o compiled.js

每次这么转换还是相当麻烦,可以使用 gulp 来实现自动化构建。

  • chencool a year

    大神有新动作了

  • 所谓刚子 a year

    突然发现你的域名又换了。。。

  • chencool a year

    首页代码够简练,我喜欢~~~不愧是大神~~~

  • bigfa a year

    还是构建大型应用的时候比较使用。小型的反而麻烦。