開始你的第一個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