开始你的第一个npm脚本工具

在实际开发中，通常刚开始一个项目或者刚接手一个项目，咱们会运行 npm install 下载安装全部依赖， 在实际开发中，可能也会使用各类命令行…… 来提升咱们开发的效率。

与它相处了这么久，你真的了解 npm 这些东西吗？

 

本篇文章会分别介绍下面几个内容：

• package.json
• 解析命令行参数
• 丰富终端交互体验
• 发布 npm 包
• 实战--开发小程序脚手架

 

项目背景：每次新建小程序页面要生成四个文件名相同的文件 ( .wxml、.wxss、.json  和 .js )，而且要在 app.json 的 pages 字段自动添加新页面路径, 在 .json 中写上当前页面的名字，很是的麻烦，因此～ 本身动手作一个 npm 脚本工具，一键生成重复性的文件，解放双手。

最终，咱们但愿实现一个这样的效果：

在工做目录下就会有对应的文件，而且 app.json 的 pages 字段自动添加新页面路径， 对应的 .json 也有当前页面的名字.

 

package.json 

第一步，相信你们都知道，npm init 以后，就会生成一个 package.json

咱们会在 package.json 中添加如下代码

"repository": {
  "type": "git",
  "url": "https://github.com/beidan/nsp"
}

这样能够指明个人代码被托管在何处，用户可使用 npm docs 命令打开该项目。可是若是 url 类型与 type类型不一致的话，那只会默认打开该包的 name

相似于一些简单的字段意思，我将不会详细说明，具体的规范能够在 package.json 规范 中查看。

在有些项目的 package.json 中，咱们可能会看到下面这样的代码：

{
  "bin": {
   "nsp": "./bin/index.js"
  },
  "scripts": {
   "precommit": "./hooks/pre-commit.js",
   "prepush": "./hooks/pre-push"
  }
}

bin 字段能够用来存放一个可执行的文件

执行 npm link 命令，它将会把 nsp 这个字段复制到 npm 的全局模块安装文件夹 node_modules 内，并建立符号连接（symbolic link，软连接），也就是将 nsp 的路径加入环境变量 PATH。就能够直接在命令行中使用 nsp …… 

scripts 在每一个命令前都会执行对应命令的 pre+scriptname 脚本，每一个命令结束后会执行对应买了的 post+scriptname 脚本。若是没有定义，则不会执行对应的pre ，post命令。

 

解析命令行参数

为了实现功能，咱们必然须要获取到用户命令行的一些参数，好比它但愿新建页面，仍是新建模块…而后处理获取到的数据。那么，要怎么获取到用户输入的数据？

咱们可使用 process.argv 拿到序列化的参数，固然，原生的处理方法都是比较麻烦的，nodejs社区里边已经有了比较成熟的命令行管理工具，好比 commander 

 

好的，咱们找到文章上面 bin 字段对应的可执行文件，在文件开始，咱们须要告诉 shell 使用何种解释器来执行代码

#!/usr/bin/env node   //使用env来找到node，并使用node来做为程序的解释程序。

usr/bin/env 是一个程序，usr/bin/env node 会找到当前 PATH 中的 node 来解释后面的代码。

 

接下来，咱们对 命令行 进行一些处理

program
    .usage('[command] [options]')  //在help中告诉用户如何使用
    .command('page [pageName]')  //定义命令行指令
    .alias('pa')                 //重命名，定义一个更短的指令
    .description('新建页面')      //描述
    .action((pageName) => {
       console.log(pageName);
    })
 // 自定义帮助信息
   .on('--help', function () {
        console.log('  Examples:');
        console.log('');
        console.log('    $ nsp page index');
        console.log('    $ nsp pa index');
        console.log();
});

program.parse(process.argv);  //解析命令行

 

丰富终端交互体验

好了，经过上面的代码，咱们能够正常地获取到用户输入的内容了，可是，咱们在开始某些命令以前，但愿先询问下用户该页面的名称，方便写入每一个页面对应的 json 里面。或者，咱们但愿他在作一些重要决定的时候，可让咱们控制，选择输入 y 仍是 n。

咱们能够借助 inquire 这个模块轻松实现，代码以下：

var questions = [
    {
        type: 'input',    // input, confirm, list, rawlist, expand, checkbox, password, editor
        name: 'selection',     //能够在answer用这个值获取输入的值
        message: '这个页面是作什么的？',   //命令行中询问用户
        default： false,  //设置默认值，通常来讲，会出如今选择中
    }
];

inquirer.prompt(questions).then((answers, input)=> { })  //解析问题

很是容易理解，咱们先建立一个 questions ，这个 questions 能够是单选，多选，密码类型… 而后解析问题，进行处理。

emmm…… 总感受还少了一点什么，再用 chalk 这个美化命令行的模块。

看官方文档很是地直观了，可让命令行变得色彩斑斓，就不赘述了。

 

 

发布 npm 包

理所固然，咱们须要有仓库帐号才容许将包发布到仓库中，能够直接去 npm 上注册。要FQ。

若是已经注册了帐号，能够用 npm login 登录便可，使用命令行证实是否登录成功。

$ npm who i am
beidan

登录成功以后，就能够发布 npm 包了 

$ npm publish

发布的时候，通常会有如下几个错误，能够选择性地阅读。

1. 没有将 registry 切回最初的源。

最初的 http://registry.npmjs.org 这个源国内用户访问很是慢，因此一开始不少人可能换成了国内淘宝的镜像：http://registry.npm.taobao.org。可是淘宝这个镜像没有开放上传的权限，所以会报这样的错误：

解决方法，在命令行改变源

npm set registry http://registry.npmjs.org  

 

2. 每次发布都须要增长 package.json 中的 version 的版本号，更新的版本号上传的版本要大于上次。

 

实战--开发小程序脚手架

下面贴相关的代码 

var writeFile = function (path, name, tit) {
    //在 app.json 中注册页面
    util.setAppInfo(appConfig);

    fileType.map((item) => {
        if (item == '.json') {
            let content = '{"navigationBarTitleText": "' + tit + '"}';
            fs.writeFile(basePath + item, content, (err)=> {
                if (err) {
                    return console.log(err);
                }
            });
        } else {
            fs.writeFile(basePath + item, '' ,(err)=> {
                if (err) {
                    return console.log(err);
                }
            });
        }
    })
}


var creatApp = function (path, name, tit) {
    //判断是否存在该目录
    if (fs.existsSync(path)) {
        console.log(chalk.red('该项目已存在，换个名字试试？'))
    } else {
        fs.mkdir(path, function (err) {
            if (err) {
                console.log(err);
                throw err;
            }
        })
        writeFile(path, name, tit)
    }
}

为了优化体验，用户可能没有在指定目录下执行相关的命令，那么咱们应该有个友好提示。

process.cwd()     //当前执行 node 命令时候的文件夹地址 
__dirname          //被执行的 js 文件的地址 ——文件所在目录

那咱们能够这样判断用户是否在指定目录下

var isCorrect  = function () {
    var baseUrl = path.resolve(__dirname, '../../'),
        curUrl = process.cwd();

    if(baseUrl !== curUrl) {
        console.log(chalk.red('  请在根目录下进行'));
        process.exit();
    }
}

 

 

 

 

参考资料：

凹凸实验室前端流程工具:  https://github.com/o2team/athena

ko3  https://github.com/o2team/ko3