從零開始寫一個npm包,一鍵生成react組件(偷懶==提升效率)

時間 2019-12-06

標籤開始一個 npm 一鍵生成 react 組件偷懶提升效率欄目 React 简体版

原文原文鏈接

前言

最近寫項目開發新模塊的時候，每次寫新模塊的時候須要建立一個組件的時候（包含組件css,index.js,組件js）,就只能會拷貝其餘組件修更名稱，可是寫了1-2個後發現效率過低了，並且極容易出錯,因此本身寫一個npm包來減小工做量,下面就一步一步來建立一個屬於本身的npm倉庫css

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

npm init  
複製代碼

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

#!/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 <name>')
       .action(name=>{
           console.log(name)
       })
  program.parse(process.argv);
複製代碼

安裝commander:git

cnpm i -d commander 
複製代碼

接下來咱們就能夠看看效果,安裝執行github

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 <name>
複製代碼

代碼正常運行,接下來修改package.json裏面bin,增長如下代碼：npm

"bin": {
    "temp": "index.js" 
  },
複製代碼

到這裏咱們第一步就算完成了,怎麼發佈npm包呢？流程以下:json

首先在[npm官網][1]中註冊帳號(若有忽略)
註冊完執行npm adduser 依次輸入賬號，密碼，郵箱,
npm version patch
npm publish就能夠提交了 npm發佈流程踩過的坑
使用npm提交，不要使用cnpm
每次修改都須要修改版本號npm version patch
項目名稱 npm倉庫是否有這個項目

發佈成功後,咱們全局安裝,剛剛我提交的項目名稱爲template-react-cli,因此執行全局安裝，使用npm安裝，cnpm會有短暫延遲redux

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文件以下:bash

#!/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 <name>')
  .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<files.length;i++){ //修改文件內容
                let fileName=`${name}/${files[i]}`;
                if(fs.existsSync(`${name}/${files[i]}`)){
                  const content = fs.readFileSync(fileName).toString();
                  const result = handlebars.compile(content)({template:name,});
                  fs.writeFileSync(fileName, result);
                }

              }
              let count = 0; //全部文件標題修改完成，提示
              for (let i = 0; i < files.length; i++) {
                if(files[i]=='index.js'||files[i]=='action.js'||files[i]=='reducer.js'||files[i]=='saga.js'){
                  continue
                }
                //獲取文件列表
                var index = files[i].indexOf('.');
                fs.rename(
                  `${name}/${files[i]}`,
                  `${name}/${name}${files[i].substring(index)}`,
                  err => {
                    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組件
選擇想要的選項，回車
輸出:✔ 開始建立..........,請稍候
⠏ 正在下載模板...
等待下載完成
輸出:✔ 模版建立成功
複製代碼