GitHub Mermaid 扩展项目教程
1. 项目的目录结构及介绍
github-mermaid-extension/
├── config/
│ └── ...
├── resources/
│ └── ...
├── src/
│ └── ...
├── .babelrc
├── .editorconfig
├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── gulpfile.babel.js
├── manifest.json
├── package.json
└── yarn.lock
- config/: 包含项目的配置文件。
- resources/: 包含项目所需的资源文件。
- src/: 包含项目的源代码。
- .babelrc: Babel 配置文件。
- .editorconfig: 编辑器配置文件。
- .gitignore: Git 忽略文件配置。
- .travis.yml: Travis CI 配置文件。
- CONTRIBUTING.md: 贡献指南。
- LICENSE.md: 许可证文件。
- README.md: 项目说明文档。
- gulpfile.babel.js: Gulp 构建脚本。
- manifest.json: 浏览器扩展的清单文件。
- package.json: 项目依赖和脚本配置。
- yarn.lock: Yarn 锁定文件。
2. 项目的启动文件介绍
项目的启动文件主要是 manifest.json
,它是浏览器扩展的清单文件,定义了扩展的基本信息、权限、以及启动时加载的文件。
{
"manifest_version": 2,
"name": "GitHub + Mermaid",
"version": "1.0",
"description": "Render mermaid diagrams in markdown files in GitHub and GitHub Gist",
"permissions": [
"https://github.com/*",
"https://gist.github.com/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://github.com/*", "https://gist.github.com/*"],
"js": ["content.js"]
}
]
}
- manifest_version: 清单文件版本。
- name: 扩展名称。
- version: 扩展版本。
- description: 扩展描述。
- permissions: 扩展所需的权限。
- background: 后台脚本配置。
- content_scripts: 内容脚本配置。
3. 项目的配置文件介绍
项目的配置文件主要包括 package.json
和 gulpfile.babel.js
。
package.json
package.json
文件定义了项目的依赖、脚本和其他元数据。
{
"name": "github-mermaid-extension",
"version": "1.0.0",
"description": "A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to GitHub",
"main": "src/index.js",
"scripts": {
"build": "gulp build",
"test": "gulp test"
},
"dependencies": {
"mermaid": "^8.14.0"
},
"devDependencies": {
"gulp": "^4.0.2",
"babel": "^6.23.0"
}
}
- name: 项目名称。
- version: 项目版本。
- description: 项目描述。
- main: 入口文件。
- scripts: 脚本命令。
- dependencies: 生产环境依赖。
- devDependencies: 开发环境依赖。
gulpfile.babel.js
gulpfile.babel.js
文件定义了项目的构建任务。
import gulp from 'gulp';
import babel from 'gulp-babel';
gulp.task('build', () => {
return gulp.src('src/**/*.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task('default', gulp.series('build'));
- gulp: Gulp 模块。
- babel: Babel 模块。
- build: 构建任务。
- default: 默认任务。