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

digo-web-pack

v0.0.9

Published

digo 插件:Web 模块依赖打包

Downloads

4

Readme

digo-web-pack

digo 插件:Web 模块依赖打包。

安装

npm install digo-web-pack -g

用法

打包 require, @import 和解析 HTML src/href

digo.src("*").pipe("digo-web-pack", function (list, packer) {
    list.src("*.js").pipe(packer.js);
    list.src("*.css").pipe(packer.css);
    list.src("*.html", ".htm").pipe(packer.html);
    list.src("*.png", "*.jpg").pipe(packer.res);
});

配置

digo.src("*").pipe("digo-web-pack", function (list, packer) {
    list.src("*.js").pipe(packer.js, {
        require: { // require 相关的配置。
            root: "", // 模块的跟路径。
            baseUrl: "", // 异步模块的请求根地址。
            commonjs: false, // 是否强制使所有模块都作为 Commonjs 模块处理。
            loader: true, // 添加的模块加载器。true 表示默认模块加载器。字符串则表示加载器本身。
            module: "var", // 默认编译的库类型。可能的值有:"var": var Library = xxx;"this": this["Library"] = xxx;"commonjs": exports["Library"] = xxx;"commonjs2": this.exports = xxx;"amd";"umd"
            exports: "", // 导出的变量名。
            extractCss: "" // 设置导出 CSS 的路径。true 表示和 js 同名。
        };
    });
    list.src("*.css").pipe(packer.css, {
        import: {
            import: "inline", // 处理 @import 的方式。"inline":内联 @import;"url":更新引用地址;"ignore":忽略。可以设置为函数自定义根据不同的文件设置。
            urlFunc: true // 是否解析 url() 函数。可以设置为函数自定义根据不同的文件设置。
        }
    });
    list.src("*.html", ".htm").pipe(packer.html, {
        tags: { // 设置不同标签属性的解析方式。如:
                //     {
                //          "img": {
                //              "src": false        // 不解析 <img src>
                //              "onpaint": "script" // 将 <img onpaint> 解析为内联的脚本
                //              "theme": "style"    // 将 <img theme> 解析为内联的样式
                //              "href": "url"       // 将 <img href> 解析为内联的地址
                //          },
                //          "*": {                  // * 将对所有节点生效
                //              "style": false
                //          }
                //      }
                // }
        },
        langs: {// 设置各语言的映射扩展名。
            "text/javascript": "js"
        },
        serverCode: null // 测试是否包含服务端代码的正则表达式。
    });
    list.src("*.png", "*.jpg").pipe(packer.res);
});

其它公共配置

{

    /**
     * 手动设置导入项。
     */
    imports?: string[];

    /**
     * 手动设置排除项。
     */
    excludes?: string[];

    /**
     * 当前资源的 MIME 类型。
     */
    mimeType?: string;

    /**
     * 解析地址的配置。
     */
    resolve?: {

        /**
         * 是否允许缓存地址解析结果。
         */
        cache?: boolean;

        /**
         * 是否采用严格解析模式。如果使用了严格模式则每次解析地址时都确认物理文件是否存在。
         */
        strict?: boolean;

        /**
         * 在解析地址前的回调函数。
         * @param url 包含地址信息的对象。
         * @param module 地址所在的模块。
         * @param defaultType 地址默认的解析方式。
         * @return 如果忽略指定的地址则返回 false。
         * @example 将地址中 `~/` 更换为指定目录然后继续解析:
         * ```json
         * {
         *      before: function(url, module, defaultType){
         *          url.path = url.path.replace(/^~\//, "virtual-root");
         *      }
         * }
         * ```
         */
        before?(url: ResolveUrlResult, module: Module, defaultType: UrlType): boolean | void;

        /**
         * 处理绝对路径(如 'http://'、'//' 和 'data:')的方式。
         * - "error": 报错。
         * - "warning": 警告。
         * - "ignore": 忽略。
         * @default "error"
         */
        absolute?: ErrorType | ((url: ResolveUrlResult, module: Module, defaultType: UrlType) => ErrorType);

        /**
         * 解析路径的方式。
         * - "relative": 采用相对地址解析。
         * - "node": 采用和 Node.js 中 `require` 相同的方式解析。
         */
        type?: UrlType,

        /**
         * 路径别名列表。
         * @example
         * ```json
         * {
         *      alias: {
         *          "$": "jquery",
         *          "require": null // 忽略解析特定的地址。
         *      }
         * }
         * ```
         */
        alias?: { [prefix: string]: string | null };

        /**
         * 搜索的根目录。
         */
        root?: string | string[];

        /**
         * 搜索的模块目录名。
         */
        modulesDirectories?: string[];

        /**
         * 检查 package.json 中这些字段以搜索入口模块。
         */
        packageMains?: string[];

        /**
         * 自动追加的扩展名。
         */
        extensions?: string[];

        /**
         * 处理无效本地路径的方式。可能值有:
         * - "error": 报错。
         * - "warning": 警告。
         * - "ignore": 忽略。
         */
        notFound?: ErrorType | ((url: ResolveUrlResult, module: Module, defaultType: UrlType) => ErrorType);

        /**
         * 在解析地址成功后的回调函数。
         * @param url 包含地址信息的对象。
         * @param module 地址所在的模块。
         * @param defaultType 地址默认的解析方式。
         * @return 如果忽略指定的地址则返回 false。
         */
        after?(url: ResolveUrlResult, module: Module, defaultType: UrlType): boolean | void;

    };

    /**
     * 处理地址相关配置。
     */
    url?: {

        /**
         * 是否内联地址。
         * @desc
         * - false(默认): 不内联。
         * - true:内联。
         * - 数字:当文件字节数未超过指定大小则内联,否则不内联。
         * - 函数:自定义是否内联的函数。
         * @param url 包含地址信息的对象。
         * @param module 地址所在的模块。
         * @return 如果需要内联则返回 true,否则返回 false。
         * @default false
         */
        inline?: boolean | number | ((url: UrlInfo, module: Module) => boolean | number);

        /**
         * 追加地址后缀。
         * @desc 可能值有:
         * - 一个字符串,字符串可以包含 __md5 等标记。支持的标记有:
         * * __md5: 替换成文件的 MD5 值。
         * * __hash: 本次生成的哈希值。
         * * __date: 替换成当前时间。
         * * __now: 替换成当前时间。
         * - 一个函数,函数参数为:
         * @param url 包含地址信息的对象。
         * @param module 地址所在模块。
         * @return 返回后缀字符串。
         */
        append?: string | ((url: UrlInfo, module: Module) => string);

        /**
         * 生成最终地址的回调函数。该函数允许自定义最终保存到文件时使用的地址。
         * @param url 包含地址信息的对象。
         * @param module 地址所在模块。
         * @param savePath 模块的保存位置。
         * @return 返回生成的地址。
         */
        format?: (url: UrlInfo, module: Module, savePath: string | undefined) => string;

        /**
         * 各个路径发布后的地址。
         * @example
         * ```json
         * {
         *    public: {
         *       "assets": "http://cdn.com/assets"
         *    }
         * }
         * ```
         */
        public?: { [url: string]: string };

    };

    /**
     * 解析注释内指令(如 #include)。
     */
    comment?: boolean | {

        /**
         * 是否解析 #include 指令。
         * @default true
         */
        include?: boolean;

        /**
         * 是否解析 #exclude 指令。
         * @default true
         */
        exclude?: boolean;

        /**
         * 是否解析 #require 指令。
         * @default true
         */
        import?: boolean;

        /**
         * 是否解析 #config 指令。
         * @default true
         */
        config?: boolean;

    };

    /**
     * 是否解析全局宏。
     */
    sub?: boolean | {

        /**
         * 是否解析 __url 常量。
         * @default true
         */
        url?: boolean;

        /**
         * 解析 __macro 常量的值。
         * @default true
         */
        macro?: boolean;

        /**
         * 是否解析 __include 常量。
         * @default true
         */
        include?: boolean;

        /**
         * 是否解析 __exclude 指令。
         * @default true
         */
        exclude?: boolean;

        /**
         * 是否解析 __require 指令。
         * @default true
         */
        import?: boolean;

        /**
         * 是否解析 __config 指令。
         * @default true
         */
        config?: boolean;

    };

    /**
     * 宏列表。
     */
    defines?: { [name: string]: boolean | string | ((module: Module) => boolean | string) };

    /**
     * 输出设置。
     */
    output?: digo.WriterOptions & {

        /**
         * 在最终输出目标文件时追加的前缀。
         * @example "/* This file is generated by digo at __date. DO NOT EDIT DIRECTLY!! *\/"
         */
        prepend?: string | ((module: Module, owner: Module) => string),

        /**
         * 在最终输出目标文件时追加的后缀。
         * @default ""
         */
        append?: string | ((module: Module, owner: Module) => string),

        /**
         * 在每个依赖模块之间插入的代码。
         * @default "\n\n"
         */
        seperator?: string,

        /**
         * 在每个依赖模块前插入的代码。
         * @default ""
         */
        modulePrepend?: string | ((module: Module, owner: Module) => string),

        /**
         * 在每个依赖模块后插入的代码。
         */
        moduleAppend?: string | ((module: Module, owner: Module) => string),

        /**
         * 用于缩进源码的字符串。
         * @default "\t"
         */
        sourceIndent?: string | ((module: Module, owner: Module) => string),

    };

}

源映射(Source Map)

本插件支持生成源映射,详见源映射