从零开始写一个npm包,一键生成react组件(偷懒==提高效率)

2018-08-10 admin

前言

最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件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 <name>')
       .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 <name>

代码正常运行,接下来修改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 <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组件
选择想要的选项,回车
输出:✔ 开始创建..........,请稍候
⠏ 正在下载模板...
等待下载完成
输出:✔ 模版创建成功

可以看到当前目录下面创建了一个header文件夹,里面包含js文件和stylcss文件,到这里整个流程就完成了,这里是下载了模版文件模版地址,大家也可以写出符合自己风格的模版文件。

后言

有了node我们可以做很多很多的事情,以后开发新模块的时候就可以偷懒了!纯手打给个赞可好?

github

https://github.com/NewPrototy…

模版github

https://github.com/NewPrototy…

原文链接:https://segmentfault.com/a/1190000015957648

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37684.html

文章标题:从零开始写一个npm包,一键生成react组件(偷懒==提高效率)

相关文章
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
jQuery的一些技巧大放送
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与d...
2015-11-11
回到顶部