開發屬於本身的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，多謝～～～