摘要：后言有了我們可以做很多很多的事情以后開發新模塊的時候就可以偷懶了純手打給個贊可好模版

最近寫項目開發新模塊的時候，每次寫新模塊的時候需要創建一個組件的時候（包含組件css,index.js,組件js）,就只能會拷貝其他組件修改名稱 ，但是寫了1-2個后發現效率太低了，而且極容易出錯,所以自己寫一個npm包來減少工作量,下面就一步一步來創建一個屬于自己的npm倉庫

首先第一步創建一個package.json文件,打開終端,輸入以下命令:

 npm init  

然后會依次提示項目名稱、版本、項目描述、入口文件...一直回車，直到出現Is this ok? (yes) ,然后輸入yes,創建一個package.json文件就完成了,接下來在根目錄創建一個index.js文件,文件內容為:

#!/usr/bin/env node   //告訴node使用終端運行
const fs = require("fs"); //文件系統
const program = require("commander"); //終端輸入處理框架
const package = require("./package.json"); //獲取版本信息
program.version(package.version, "-v,--version")
       .command("init ")
       .action(name=>{
           console.log(name)
       })
  program.parse(process.argv);

安裝commander:

cnpm i -d commander 

接下來我們就可以看看效果,安裝執行

node index.js -v 
輸出:1.0.0
node index.js init header
輸出:header
node index.js -h 
輸出: Usage: index [options] [command]

  Options:

    -v,--version  output the version number
    -h, --help    output usage information

  Commands:

    init 

代碼正常運行,接下來修改package.json里面bin,增加以下代碼：

  "bin": {
    "temp": "index.js" 
  },

到這里我們第一步就算完成了,怎么發布npm包呢？流程如下:

首先在[npm官網][1]中注冊賬號(如有忽略)

注冊完執行npm adduser 依次輸入帳號，密碼，郵箱,

npm version patch

npm publish就可以提交了

npm發布流程踩過的坑

使用npm提交，不要使用cnpm

每次修改都需要修改版本號npm version patch

項目名稱 npm倉庫是否有這個項目

發布成功后,我們全局安裝,剛剛我提交的項目名稱為template-react-cli,所以執行全局安裝，使用npm安裝，cnpm會有短暫延遲

npm i template-react-cli -g
temp -v    
輸出:1.0.0 
temp init footer 
輸出: footer

屬于我們的npm可以正常使用了，接下來豐富我們的npm包,先安裝依賴:

cnpm i -d download-git-repo handlebars inquirer log-symbols ora

安裝完成后,豐富我們的功能index.js文件如下:

#!/usr/bin/env node
const fs = require("fs");

const program = require("commander");
const download = require("download-git-repo"); //下載模版文件
const chalk = require("chalk");  //美化終端
const symbols = require("log-symbols"); //美化終端
const handlebars = require("handlebars"); //修改模版文件內容

const ora = require("ora"); //提示下載
var inquirer = require("inquirer");  //提示文本
const package = require("./../package.json"); //獲取版本信息
const re = new RegExp("^[a-zA-Z]+$"); //檢查文件名是否是英文，只支持英文

program
  .version(package.version, "-v,--version")
  .command("init ")
  .action(name => {
    if (!re.test(name)) { //檢查文件名是否是英文
      console.log(symbols.error, chalk.red("錯誤!請輸入英文名稱"));
      return 
    } 
    if (!fs.existsSync(name)) { //檢查項目中是否有該文件
      inquirer  
        .prompt([
          {
            type: "list",
            name: "type",
            message: "請選擇模版類型?",
            choices: [
              "react-component------ES6組件",
              "react-function------函數組件",
              "react-redux------ES6組件",
            ],
          },
        ]) 
        .then(answers => {
            //用戶選擇后回調
          console.log(symbols.success,chalk.green("開始創建..........,請稍候"));
          const spinner = ora("正在下載模板...");
          spinner.start();
          const type = getType(answers)
          download(`github:NewPrototype/template/#${type}`, name, err => {
            if (err) {
              spinner.fail();
            } else {
              spinner.succeed();
              var files = fs.readdirSync(name);
              for(let i=0;i {
                    if (err) {
                      console.log("---錯誤");
                    }
                    count++;
                    if (count+1 == files.length) { //排除index.js文件
                      console.log(symbols.success, chalk.green("模版創建成功"));
                    }
                  }
                );
              }
            }
          });
        });
    } else {
      console.log(symbols.error, chalk.red("有相同名稱模版"));
    }
  });

program.parse(process.argv);

const getType = (type) => {
  let str = "master";
  switch (type.type) {
    case "react-component------ES6組件":
      str = "component"
      break;
      case "react-function------函數組件":
      str = "master"
      break;
      case "react-redux------ES6組件":
      str = "redux"
      break;
    default:
      break;
  }
  return str
}

然后重新提交文件到npm倉庫,方法和上面發布流程一樣,發布完成后:

npm i template-react-cli -g
先檢查版本號
temp -v  
輸出:1.02
然后檢查功能:
temp init header 
輸出:? 請選擇模版類型? (Use arrow keys)
? react-component------ES6組件
  react-function------函數組件
  react-redux------ES6組件
選擇想要的選項，回車
輸出:? 開始創建..........,請稍候
? 正在下載模板...
等待下載完成
輸出:? 模版創建成功

可以看到當前目錄下面創建了一個header文件夾，里面包含js文件和stylcss文件,到這里整個流程就完成了，這里是下載了模版文件模版地址,大家也可以寫出符合自己風格的模版文件。

有了node我們可以做很多很多的事情,以后開發新模塊的時候就可以偷懶了!純手打給個贊可好？

https://github.com/NewPrototy...

https://github.com/NewPrototy...