使用yeoman自动构建chrome插件目录结构

发表于   |  

目的

为了减少每次编写插件时都去重新建一次目录

yeoman项目的目录结构


generators目录下的文件结构

templates存放最终生成的文件结构（下图的样子）
index.js 逻辑代码

最终生成的目录结构

Yeoman

有一种技术可以提高我们的工作效率，可以让我们专心做我们擅长的事，可以屏蔽复杂性，可以规范我们的架构和我们的代码，可以让我们的享受编程的乐趣。Yeoman可以做到。

很多年以前，rails刚刚出世，伴随着一个新的名词“脚手架(scaffolding)”出现了。脚手架是一种提高开发效率的工具的代名词。随后，各种编程语言都开始实现自己的“脚手架”工具。Maven重新构造了Java的世界，改变了几千万的开发者对于Java项目构建的认识。Yeoman在Javascript领域正做着同样的事情。

官网 http://yeoman.io/

使用方法

1、全局安装

1
$ npm install yo  -g

2、本地安装

1
$ npm install yeoman-generator --save

3、生成package.json文件

1
$ npm init

最终代码应该是这样的

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "generator-yo-chrome-extension",
  "version": "0.1.0",
  "description": "",
  "files": [
    'generators'
  ],
  "keywords": ["yeoman-generator"],
  "dependencies": {
    "yeoman-generator": "^0.24.1"
  }
}

  • 关键点：
    a、files 就是生成项目的文件，这个必须的有,我这里文件名是generators（这里必须得一致才行，不然在往npm上传的时候不会将这个文件夹给上传上去)
    b、keywords 关键字中必须得包含yeoman-generator
    c、dependencies项目必须依赖yeoman-generator
    4、编写脚手架核心代码
    index.js核心代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
      writing() {
        this.fs.copy(
          this.templatePath('main.js'),
          this.destinationPath('main.js')
        );
        this.fs.copy(
          this.templatePath('styles.css'),
          this.destinationPath('styles.css')
        );
        this.fs.copy(
          this.templatePath('manifest.json'),
          this.destinationPath('manifest.json')
        );
        this.fs.copy(
          this.templatePath('popup.html'),
          this.destinationPath('popup.html')
        );
        mkdirp('images');
      }
    });

5、本地测试
在package.json同级的目录下通过link的方式

1
$ npm link

将脚手架工具安装到安装到本地，任意新建一个文件夹，在该文件夹下测试是否能成功生成

1
$ yo your-generator-name

比如

1
$ yo yo-chrome-extension

6、发布

当测试没有问题了，可以上传到npm上

步骤

源码：https://github.com/phobal/b-note/tree/master/generator-yo-chrome-extension

完