前端工程化 發佈一個自動生成微信開發文件的npm包

做爲一個前端開發者，要是連npm包也沒用過那也是太low了，我們知道，我們用到的npm包實際上也是別人開發發佈上去的，那我們如何去發佈自己的npm包呢
我們知道，在開發微信小程序的時候，每個頁面對應的文件放在一個文件夾下，這個文件夾的名字和裏面文件的文件名都要一樣，而每次寫一個新的頁面我們都要先創建一個文件夾，再按這個文件夾的名字來創建wxml，wxss，js，json文件，萬一寫錯了還會報錯，這裏寫一個generator來完成這個創建工作

編寫generator

新建一個文件夾generator-wxfile
npm init初始化內容，一切選項按默認的來

接下來下載npm包yeoman-generator

npm i yeoman-generator

創建如圖目錄

templates中存放的是模板文件，就是我們最終要放到本地的文件的模板，，我們看看基礎的模板文件需要什麼，wxml和wxss不需要什麼東西，我們在json文件內寫入一個{}

{}

在js文件裏寫入各個生命週期函數，這裏的第3行<%= fileName%>是用了ejs語法，用來標識文件名

Page({
    data: {
      text: "This is <%= fileName%> data."
    },
    onLoad: function(options) {
      // 頁面創建時執行
    },
    onShow: function() {
      // 頁面出現在前臺時執行
    },
    onReady: function() {
      // 頁面首次渲染完畢時執行
    },
    onHide: function() {
      // 頁面從前臺變爲後臺時執行
    },
    onUnload: function() {
      // 頁面銷燬時執行
    },
    onPullDownRefresh: function() {
      // 觸發下拉刷新時執行
    },
    onReachBottom: function() {
      // 頁面觸底時執行
    },
    onShareAppMessage: function () {
      // 頁面被用戶分享時執行
    },
    onPageScroll: function() {
      // 頁面滾動時執行
    },
    onResize: function() {
      // 頁面尺寸變化時執行
    },
    onTabItemTap(item) {
      // tab 點擊時執行
      console.log(item.index)
      console.log(item.pagePath)
      console.log(item.text)
    },
    // 事件響應函數
    viewTap: function() {
      this.setData({
        text: 'Set some data for updating view.'
      }, function() {
        // this is setData callback
      })
    },
    // 自由數據
    customData: {
      hi: 'MINA'
    }
  })

接下來編寫index.js文件，引入yeoman-generator模塊，輸出一個generator模塊，具體的generator構建看前端工程化 通過yeoman-generator將文件加載到本地，這裏再引入一個fs模塊用於創建文件夾

const Generator = require("yeoman-generator")
const fs = require("fs")

module.exports = class extends Generator{
    prompting(){
        return this.prompt([{ // 詢問用戶要創建的文件夾的名字
            type:"input",
            name:"fileName",
            message:"your file name is",
            default:"page"
        }]).then(answer=>{
            this.answer = answer // 將回答放到answer屬性中
        })
    }
    writing(){
        const fileName = this.answer.fileName
        const tempFile = ["fileName.js","fileName.json","fileName.wxml","fileName.wxss"]
            .map(path=>this.templatePath(path))
        const outputFile = [`${fileName}/${fileName}.js`,`${fileName}/${fileName}.json`,`${fileName}/${fileName}.wxml`,`${fileName}/${fileName}.wxss`]
            .map(path=>this.destinationPath(path))
        fs.mkdirSync(fileName) // 創建文件夾
        for(let i=0;i<tempFile.length;i++){
            this.fs.copyTpl(tempFile[i],outputFile[i],this.answer) // 文件寫入
        }
    }
}

執行npm link，將模塊鏈接到全局，在本地測試一下，新建一個文件夾執行yo wxfile

這樣就創建成功了，而且查看js文件，發現第三行的text的值變成了"This is newPage data."

發佈到npm上

執行npm publish就可以發佈了，下面這樣就是發佈成功了

當然，也可能會遇到踩坑的情況，可以看下npm publish發佈時的踩坑記錄

到這裏就發佈成功了，可以通過npm i [email protected] -g來將這個generator下載到全局使用，也可以先下載我的試試看和你做的效果是不是一樣
上面說的是1.0.0版本的功能，後面我會對這個npm包做一些修改
在1.0.1版本中，我在添加文件的同時，將相應的路由寫入了app.json文件的pages屬性中，但是yo wxfile要在app.json文件所在的目錄執行
後面的版本還在持續更新中