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)
本插件支持生成源映射,详见源映射。