开发属于本身的yeoman脚手架（generator-reactpackage）

自从先后端开始分离以后，前端项目工程化也显得愈来愈重要了，以前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程，有兴趣的能够点这里去看

可是有些项目能够使用这种方式，但有些却不太适合，或者咱们就是想要去尝试新的框架。好比最近我就尝试着使用了webpack+react+es6的方式开发项目，感受很不错，而后不少项目都用了这种方式。因此为了避免须要每次开发的时候都从头开始新建文件，就想着能不能弄个工具，使用命令可以快速的生成这样一套跑的通的项目模版，正好，有个工具叫yeoman。

本篇文章看点：

• 教你使用yeoman快速开发本身的脚手架。

• 介绍做者编写的generator-reactpackage脚手架模版，此项目的开发基于webpack+react+es6，项目功能包含：

  • 启动本地服务，默认监听端口8888

  • css文件能自动补全css3属性的前缀

  • 包含路由功能(react-router)

  • 使用命令npm run dev启动服务，修改保存文件的时候浏览器会自动刷新（若是不想要实时刷新的功能，将webpack.config.js文件的devServer配置改成inline: false）

  • 使用npm run build打包文件，js和css分开打包，而且默认会压缩文件

开发脚手架

环境准备

安装或者更新一下你的node和npm

npm install -g n  //首先安装n模块
n stable   //升级node.js到最新稳定版
n 5.0.0   //或者指定版本升级
node -v   //检查更新是否成功

而后安装yeoman

npm install -g yo

建立目录

新建一个名为generator-xxx（yeoman脚手架命名规范）的文件夹，我这里叫generator-reactpackage。而后在目录下执行npm init建立package.json文件。修改成：

{
  "name": "generator-reactpackage",
  "version": "0.0.4",
  "description": "基于ract+webpack的项目目录快速生成器",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/luckykun/generator-reactpackage.git"
  },
  "keywords": [
    "yeoman-generator"
  ],
  "author": "luckykun",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/luckykun/generator-reactpackage/issues"
  },
  "homepage": "https://github.com/luckykun/generator-reactpackage",
  "dependencies": {
    "chai": "^3.3.0",
    "chalk": "^1.1.1",
    "fs-extra": "^0.24.0",
    "mocha": "^2.3.3",
    "yeoman-generator": "^0.24.1",
    "yosay": "^1.0.5"
  }
}

注意：package.json的信息必定要尽量完整，否则可能上传不到generator-lists

而后在此目录下新建generators->app->index.js，generators-app-templates，以下图所示：

• generator-reactpackage是整个npm包的项目文件夹。

• templates目录里面就是咱们最后要用到的项目模版文件，里面的内容是一个完整的前端项目，能够自定义。

• index.js是开发脚手架的主要逻辑文件。

开始开发

而后编辑index.js文件：

var path = require('path');
var chalk = require('chalk');    //不一样颜色的info
var util = require('util');
var yeoman = require('yeoman-generator');
var yosay = require('yosay');    //yeoman弹出框
var path = require('path');
var Reactpackage = yeoman.Base.extend({
    info: function() {
        this.log(chalk.green(
            'I am going to build your app!'
        ));
    },
    generateBasic: function() {  //按照本身的templates目录自定义
        this.directory('src', 'src');    //拷贝目录
        this.directory('data', 'data');
        this.copy('package.json', 'package.json');   //拷贝文件
        this.copy('index.html', 'index.html');
        this.copy('README.md', 'README.md');
        this.copy('webpack.config.js', 'webpack.config.js');
    },
    generateClient: function() {
        this.sourceRoot(path.join(__dirname, 'templates'));
        this.destinationPath('./');
    },
    install: function() {      //安装依赖
        this.installDependencies({
            skipInstall: this.options['skip-install']
        });
    },
    end: function() {
        this.log(yosay(
            'Your app has been created successfully!'
        ));
    }
});
module.exports = Reactpackage;

上面这个文件就是主要逻辑部分了。至于具体的语法，能够参考这篇文章。快速搭建基于yeoman快速编写脚手架工具

上传

开发完成以后，咱们就能够将generator-reactpackage这个项目上传到npm官网。步骤以下：

npm adduser  //若是没有帐号，用此命令注册
npm login   //若是有帐号，用此命令登录
npm publish --access=public     //上传到npm官网

上传成功后会提示：

+ generator-reactpackage@0.0.4

而后你能够访问http://yeoman.io/generators/这里去搜索一下本身的包，有没有上传成功，好比搜索reactpackage就会出现我上传的脚手架。以下图：

注意：

• 上传到npm官网以前须要先将脚手架项目上传到github

• 脚手架项目的package.json文件必定要尽量详细，好比git主页，readme文件连接等等

若是你能搜到本身上传的脚手架了，OK，开发基于yeoman的脚手架工具就到这里结束了。有兴趣的同窗能够去看看我编写的generator-reactpackage源码，喜欢的同窗顺便来个star～～哈哈，感谢～

使用脚手架（generator-reactpackage）

首先确保本身安装了nodejs，而后全局安装yeoman

npm install -g yo

而后直接安装脚手架

npm install -g generator-reactpackage

在合适的地方新建一个文件夹，在文件夹下运行：

yo reactpackage

而后就会在此目录下生成如下目录结构：

├── data
│   └── test.json
├── src
│   ├── components
│   │   └── App.js
│   ├── images
│   │   └── yeoman.png
│   ├── styles
│   │   └── app.scss
│   ├── vendor
│   │   └── jquery.js
│   ├── views
│   │   └── home.html
├── node_modules
├── index.html
├── package.json
└── webpack.config.js

细心的同窗可能已经发现，其实这里生成的内容就是咱们脚手架中定义的templates目录下的内容。

而后使用如下命令：

npm run dev    //项目开发过程使用，启动服务，实时刷新
npm run build    //开发完成以后打包文件（js、css分开打包）

注意：

• 本项目默认监听端口是8888，因此在浏览器输入 http://localhost:8888 就能看到效果了

• 若是执行上述命令提示错误：Error: getaddrinfo ENOTFOUND localhost，在host文件里面添加127.0.0.1 localhost便可

• 监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置

• 若是项目运行正常，会看到以下效果：

结语

能够看到，定义一个本身经常使用的脚手架骑士挺简单的，还有更多的功能有待探索。generator-reactpackage是一个基于webpack+react+es6开发的项目模版，有须要用到这个模版的同窗就赶快安装用起来吧。

另外，它的源码已经上传到github上，喜欢generator-reactpackage的同窗顺便给个star，多谢～～～