npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grunt-cmd-combo

v1.0.0

Published

Concat SeaJS module files.

Downloads

4

Readme

grunt-cmd-combo

用来打包 SeaJS 模块的 grunt 任务。

特点

grunt-cmd-combo 打包后的文件可以脱离 SeaJS 直接执行。

grunt-cmd-combo 的模块化标准是 SeaJS 的一个子集,规则非常简单:

  • 所有的 define 定义只包含一个参数,即 factory 函数:
  • factory 函数只接受 require 函数以及 exports 对象,不接受 module 对象
  • require 只支持相对路径 require

例子:

/* math.js */
define(function (require) {
    return {
        plus: function (a, b) {
            return a + b;
        }
    };
});

/* main.js */
define(function (require) {
    require('./math').plus(1, 2); // 3
});

原理

以上面给的例子 math.js 以及 main.js 为例,在对 main.js 打包时的流程如下:

  1. 分析入口模块 main.js,建立主模块的依赖数组 dpes
  2. 将所有的 require 参数由相对于当前文件的路径转为相对于源码根目录的路径:require('./math') 会被转换为 require('math')
  3. 分析所有依赖的模块,将依赖的模块名加入 deps
  4. 对所有依赖的模块,递归地进行 2-4 步
  5. deps 中所有的模块中的代码按顺序合并成一个文件
  6. loader.js 的内容加到最终输出文件的开头(提供无 SeaJS 环境下的 define 函数支持)
  7. main.js 的内容加到最终输出文件的结尾

loader.js

loader.js 提供了最简单的一个 define 函数实现,以使得代码在打包后可以脱离 SeaJS 执行。

使用

安装:

npm install grunt-cmd-combo

grunt-cmd-combo 是一个 MultiTask,支持 3 个参数:

src 源码目录。所有的模块都应该放在这个目录下,必须以 / 结尾。

dest 目标目录。打包后的文件会输出到这个目录下,并且保持 src 目录中的目录结构,必须以 / 结尾。

initModules 入口模块。文件路径应该相对于 src 目录,支持文件通配符指定多个入口模块,会分别打包输出成多个文件。

参考例子:

grunt.initConfig({
    combo: {
        build: {
            src: 'src/', // 源码目录
            dest: 'dist/', // 目标目录
            initModules: 'main.js' // 入口模块,支持文件通配符
        }
    }
});

grunt.loadNpmTasks('grunt-cmd-combo');

会将 src/main.js 打包输出到 dist/main.js

打包后的代码只需要一个 <script> 标签来载入,不需要 SeaJS 支持:

    <script src="/dist/main.js" data-main="main" type="text/javascript"></script>

优点

  • 简单,只支持 SeaJS 模块化规范中最精简的一个子集
  • 可靠,经历过[网易微博]、[有道云笔记]等多个项目近 2 年的实际应用检验,从来没出过问题

Push Request

欢迎提交 Push Request,提交前请先通过 grunt test 保证代码通过单元测试和 jslint 检查。

发布历史

0.1.0 2012-12-10 首次发布。

License

Copyright (c) 2012 PerfectWorks
Licensed under the MIT license.