fe-tree
v0.0.17
Published
static resource tree
Downloads
11
Readme
fe-tree
节点对象
node.file // 文件路径
node.content // 文件内容,类型是 Buffer,转字符串用 node.content.toString()
node.md5 // 获取文件内容的 md5
node.extname // 获取文件的扩展名,格式为 `.js`
node.children // 子节点
依赖对象
dependency.raw // 在代码里写的原始字符串,如 ./a.png
dependency.file // 依赖对应到硬盘上的文件路径,如 ./a.png 对应到硬盘上是 /Users/project/src/img/a.png
dependency.amd // 如果是一个 amd 模块,这个值一定为 true
dependency.plugin // amd 加载资源的插件,如果不是用插件加载的资源,plugin 为空字符串
dependency.async // amd 加载的资源是否是异步加载的
dependency.module // 依赖位于哪个模块中
对于普通依赖来说,只需要关心 raw
和 file
,举个例子:
在 project/index.html 文件中有个图片,如下:
<img src="./a.png" />
当我们分析这个依赖时,会提取出一个 dependency 对象,数据如下:
{
raw: './a.png',
file: 'project/a.png'
}
这样就能通过 file
去获取 md5,然后做一些替换工作。
对于 AMD 来说,新增了 3 个属性,举个例子:
define('demo', function (require) {
require('./a');
require('text!./b.html');
});
对于 a 依赖来说,依赖对象如下:
{
raw: './a',
file: '根据 amd config 分析出来的文件路径',
amd: true,
plugin: '',
module: 'demo'
}
对于 b 依赖来说,依赖对象如下:
{
raw: './b.html',
file: '根据 amd config 分析出来的文件路径',
amd: true,
plugin: 'text',
module: 'demo'
}
节点用法
var node = Node.create('filePath');
node.walk({
// html 中的依赖提取规则
// 默认支持以下 4 种(不区分单双引号)
// 1. href=""
// 2. src=""
// 3. require('xx'
// 4. require(['xx']
// 如果需要其他的可自行扩展
htmlRules: [
{
pattern: /src=['"][^'"]+['"]/gi,
match: function (result) {
var terms = result.split(/['"]/);
if (terms.length === 3) {
return terms[1];
}
}
}
],
// css 中的依赖提取规则
// 默认支持以下 2 种(不区分单双引号)
// 1. @import ""
// 2. url("") 或不需要引号
// 如果需要其他的可自行扩展
cssRules: [
{
pattern: /@import\s+['"](?:[^'")]+)['"]/gi,
match: function (result, file) {
var terms = result.split(/['"]/);
if (terms.length === 3) {
var result = terms[1];
if (path.extname(result) === '') {
return {
extname: path.extname(file),
raw: result
};
}
else {
return result;
}
}
}
}
],
// AMD require config 配置
amdConfig: {
baseUrl: '',
paths: {
},
packages: [
],
combine: {
exclude: [
'**/*'
]
}
},
// 处理每一个依赖
processDependency: function (dependency, node) {
// 对于不合法的依赖,需要进行过滤
// 过滤是通过 return 实现的,即不 return 或 return null 表示过滤
// 纠正依赖的路径通过改写 dependency.raw 实现
// 如果是 amd 插件,会传入 dependency.plugin,可改写该属性
// 例如,对于一个模板文件,如果希望打包成 amd 模块,可分为两步:
// 1. 把 dependency.raw 改写成符合 amd 命名规则的名字
// 2. 把 dependency.plugin 改写为 ''
}
});
入口模块
调用 parse() 可生成正向(dependencyMap)和反向依赖表(reverseDependencyMap)
var feTree = require('fe-tree');
// 项目根目录
var projectDir = '';
feTree.parse({
files: [
projectDir + '/index.html'
],
amdConfig: {
baseUrl: projectDir + '/src',
packages: [
{
name: 'cc',
location: '../dep/cc/1.0.0/src',
main: 'main'
},
{
name: 'moment',
location: '../dep/moment/2.10.6/src',
main: 'moment'
}
]
},
processDependency: function (dependency, node) {
var raw = dependency.raw;
// 过滤依赖
if (/[{}$]/.test(raw)) {
return;
}
// 纠正依赖路径
if (!dependency.amd) {
var prefix = {
'src': projectDir + '/',
'dep': projectDir + '/',
'/src': projectDir,
'/dep': projectDir,
'common': projectDir + '/src/'
};
util.each(
prefix,
function (value, key) {
if (raw.startsWith(key)) {
dependency.file = value + raw;
return;
}
}
);
if (!dependency.file && /^(\.\/|[^./])/.test(raw)) {
dependency.file = path.join(node.file, '..', raw);
}
}
var moduleExclude = {
jquery: 1,
text: 1,
tpl: 1,
css: 1,
js: 1
};
var rawExclude = {
require: 1,
exports: 1,
module: 1
};
if (!moduleExclude[dependency.module]
&& !rawExclude[dependency.raw]
) {
return dependency;
}
}
});
// 正向依赖表
feTree.dependencyMap;
// 反向依赖表
feTree.reverseDependencyMap;
// 输出到文件
feTree.writeJSON('file', feTree.dependencyMap);
feTree.writeJSON('file', feTree.reverseDependencyMap);