摘要：后言有了我們可以做很多很多的事情以后開(kāi)發(fā)新模塊的時(shí)候就可以偷懶了純手打給個(gè)贊可好模版

最近寫(xiě)項(xiàng)目開(kāi)發(fā)新模塊的時(shí)候，每次寫(xiě)新模塊的時(shí)候需要?jiǎng)?chuàng)建一個(gè)組件的時(shí)候（包含組件css,index.js,組件js）,就只能會(huì)拷貝其他組件修改名稱 ，但是寫(xiě)了1-2個(gè)后發(fā)現(xiàn)效率太低了，而且極容易出錯(cuò),所以自己寫(xiě)一個(gè)npm包來(lái)減少工作量,下面就一步一步來(lái)創(chuàng)建一個(gè)屬于自己的npm倉(cāng)庫(kù)

首先第一步創(chuàng)建一個(gè)package.json文件,打開(kāi)終端,輸入以下命令:

 npm init  

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

#!/usr/bin/env node   //告訴node使用終端運(yùn)行
const fs = require("fs"); //文件系統(tǒng)
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 

接下來(lái)我們就可以看看效果,安裝執(zhí)行

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 

代碼正常運(yùn)行,接下來(lái)修改package.json里面bin,增加以下代碼：

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

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

首先在[npm官網(wǎng)][1]中注冊(cè)賬號(hào)(如有忽略)

注冊(cè)完執(zhí)行npm adduser 依次輸入帳號(hào)，密碼，郵箱,

npm version patch

npm publish就可以提交了

npm發(fā)布流程踩過(guò)的坑

使用npm提交，不要使用cnpm

每次修改都需要修改版本號(hào)npm version patch

項(xiàng)目名稱 npm倉(cāng)庫(kù)是否有這個(gè)項(xiàng)目

發(fā)布成功后,我們?nèi)职惭b,剛剛我提交的項(xiàng)目名稱為template-react-cli,所以執(zhí)行全局安裝，使用npm安裝，cnpm會(huì)有短暫延遲

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

屬于我們的npm可以正常使用了，接下來(lái)豐富我們的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"); //修改模版文件內(nèi)容

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("錯(cuò)誤!請(qǐng)輸入英文名稱"));
      return 
    } 
    if (!fs.existsSync(name)) { //檢查項(xiàng)目中是否有該文件
      inquirer  
        .prompt([
          {
            type: "list",
            name: "type",
            message: "請(qǐng)選擇模版類型?",
            choices: [
              "react-component------ES6組件",
              "react-function------函數(shù)組件",
              "react-redux------ES6組件",
            ],
          },
        ]) 
        .then(answers => {
            //用戶選擇后回調(diào)
          console.log(symbols.success,chalk.green("開(kāi)始創(chuàng)建..........,請(qǐng)稍候"));
          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("---錯(cuò)誤");
                    }
                    count++;
                    if (count+1 == files.length) { //排除index.js文件
                      console.log(symbols.success, chalk.green("模版創(chuàng)建成功"));
                    }
                  }
                );
              }
            }
          });
        });
    } 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------函數(shù)組件":
      str = "master"
      break;
      case "react-redux------ES6組件":
      str = "redux"
      break;
    default:
      break;
  }
  return str
}

然后重新提交文件到npm倉(cāng)庫(kù),方法和上面發(fā)布流程一樣,發(fā)布完成后:

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

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

有了node我們可以做很多很多的事情,以后開(kāi)發(fā)新模塊的時(shí)候就可以偷懶了!純手打給個(gè)贊可好？

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

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