SyncMe
简介
自动化打包chrome extention项目，自动关联文件路径到主程序配置，对关键代码进行混淆压缩（待开发），优化项目目录结构，有助于快速开发功能复杂的扩展程序。
目录说明
----项目根目录
----index.js 打包主程序代码
----src 扩展项目目录
------manifest.json 扩展主配置文件，部分项为自动生成，不允许手动配置，请参考选项
------icons 图标目录，仅支持ico格式图标，且名称是支持的大小，如48.ico，建议使用标准大小[16, 48, 128]
------pages 扩展模块目录
--------background 原扩展后台模块
--------[xxx] 其他模块
----------[xxx.html] background模块有效，存在时使用页面模式，否则仍然寻找js文件作为主入口 ----------[xxx.js] 主程序文件 ----------[xxx.json] 模块配置文件，主要可配置加载时机和匹配规则等 ----------[xxx.(less|css)] 模块加载的样式文件 ----------其他引用的js和样式文件可在以上主文件中使用import/@import等语法导入
快速上手
- 全局安装脚手架
npm install e-syncme-cli -g
-
新建项目
- 新建并自动安装依赖项
syncme create- 选项 -ni | 添加此选项后，不会自动安装依赖项
syncme create -ni
或者参考手动搭建SyncMe框架
- 运行项目
syncme start
<!-- 或者在脚手架项目中 -->
npm run start
- 构建项目生产版本
syncme build
<!-- 或者在脚手架项目中 -->
npm run build
手动搭建SyncMe框架项目
- 安装依赖包
npm install e-syncme -save--dev
- 运行项目
gulp --watch
- 打包项目生产版本
gulp
建议在项目package.json中添加命令，使用npm run xxx运行
项目内命令
- 创建模块
syncme m -c [name]
会以脚手架模板文件为基础，在项目根目录/src/pages下创建一个新的模块。 若键入名称为background，则按照background模块创建。 若指定位置已存在模块同名文件夹，则命令无效。
- 删除模块
syncme m -d [name]
在项目根目录/src/pages下删除匹配name的模块文件夹。 若文件夹不存在，则会抛出错误。
- 重命名模块
syncme m -r [oldname] [newname]
模块名称仅可包含英文字母、数字和下划线，并且以英文字母开头。
选项
manifest.json选项
-
manifest_version | 原配置项 | 必须存在且目前只能为2.
-
name | 原配置项 | 扩展项目的名称
-
version | 原配置项 | 扩展项目的版本号
-
description | 原配置项 | 扩展项目的描述说明
-
permissions | 原配置项 | 扩展所需权限声明，参考permission
-
browser_action | 暂不支持
-
icons | 不允许手动配置 | 需要将使用的文件放入src/icons文件夹，参考目录说明
-
background | 不允许手动配置 | 后台模块，可在pages/backgound中直接书写代码
-
content_scripts | 不允许手动配置 | 非后台模块，可在pages中对应目录下直接书写代码
-
其余涉及自定义文件的配置项均不支持，剩余需要在manifest.json中手动配置实现。
模块目录下同名json选项
-
matches | 原配置项 | 模块匹配的路径规则
-
run_at | 原配置项 | 模块加载时机，默认为document_idle
-
js或scripts | 不允许手动配置 | 在模块目录下同名js文件中书写代码即可
-
css | 不允许手动配置 | 在模块目录下同名css文件中书写代码即可
方法
内置方法
-
syncLoad | 异步dom加载执行模块
- 参数 parentNode string | Node 父节点或其选择器
- 参数 childSelector string 子节点选择器
- 参数 callback function 异步加载回调
- 参数 config object 监听配置项
- 返回值 void
子节点选择器需要传入从父节点下算起的局部选择器，既不包含父节点及更外层节点；
回调方法中可使用两个参数，即异步加载获取得到的父节点对象和子节点对象；
使用MutationObserver监听，因此监听配置项为其实例的observe方法中传入的配置对象，具体参考observe方法；
**注意：**父节点参数不能传入一个动态节点，否则初始化或其改变时不能重新加载回调；并且丢失后内存无法回收。