摘要：前情提要自動(dòng)工具，前端打字員的自我救贖記第一次發(fā)布包經(jīng)歷，是重構(gòu)中的代碼是版本可以工作的代碼配置文件待導(dǎo)入的模塊引用模塊的文件引用模塊的方式忽略的模塊實(shí)現(xiàn)監(jiān)聽(tīng)文件的刪除和添加以上代碼主要使用了來(lái)監(jiān)聽(tīng)文件的變化。

自動(dòng) Import 工具，前端打字員的自我救贖

記第一次發(fā)布npm包經(jīng)歷，smart-import

GitHub:smart-import

develop是重構(gòu)中的代碼

master是1.0版本可以工作的代碼

from：待導(dǎo)入的模塊

to：引用模塊的文件

template：引用模塊的方式

ignored：忽略的模塊

{
    "from": "demo/pages/**/*.vue",
    "to": "demo/router/index.js",
    "template": "const moduleName = () => import(modulePath)",
    "ignored": [
        "demo/pages/pageA.vue"
    ]
}

#!/usr/bin/env node
const path = require("path")
const chokidar = require("chokidar")
const config = JSON.parse(fs.readFileSync("smart-import.json"))

class SmartImport {
    constructor({ from }) {
        this.from = from
        this.extname = path.extname(from)
    }

    watch() {
        chokidar
            .watch(this.from, {
                ignoreInitial: true
            })
            .on("add", file => {
                console.log("add", file)
            })
            .on("unlink", file => {
                console.log("unlink", file)
            })
    }
}

let smartImport = new SmartImport(config)
smartImport.watch()

以上代碼主要使用了chokidar來(lái)監(jiān)聽(tīng)文件的變化。但存在一個(gè)問(wèn)題，如果刪除文件夾，而文件夾中包含匹配的模塊，不會(huì)觸發(fā)unlink事件。所以改成watch整個(gè)目錄，然后在add和unlink的回調(diào)中添加判斷文件后綴的代碼，因?yàn)槲覀兛赡苤辉谝?strong>.vue，而不在意.js

...
watch() {
        chokidar
            .watch(path.dirname(this.from), {
                ignoreInitial: true
            })
            .on("add", file => {
                if (path.extname(file) === this.extname) {
                    console.log("add", file)
                }
            })
            .on("unlink", file => {
                if (path.extname(file) === this.extname) {
                    console.log("unlink", file)
                }
            })
    }
...

現(xiàn)在符合from的文件的變動(dòng)（添加和刪除）都被監(jiān)視了，但是總覺(jué)得

if (path.extname(file) === this.extname) {
  
}

寫了兩遍，不開(kāi)心

class SmartImport {
    constructor({ from }) {
        this.from = from
        this.extname = path.extname(from)
        this.checkExt = this.checkExt.bind(this)
    }

    watch() {
        const { from, checkExt } = this
        chokidar
            .watch(path.dirname(from), {
                ignoreInitial: true
            })
            .on(
                "add",
                checkExt(file => {
                    console.log("add", file)
                })
            )
            .on(
                "unlink",
                checkExt(file => {
                    console.log("unlink", file)
                })
            )
    }

    checkExt(cb) {
        return file => {
            if (path.extname(file) === this.extname) {
                cb(file)
            }
        }
    }
}

新添加了函數(shù)checkExt()，它的參數(shù)和返回值都是函數(shù)，只是添加了判斷文件后綴名的邏輯。

高階函數(shù)有木有！

函數(shù)式編程有木有！

另外就是注意通過(guò)this.checkExt = this.checkExt.bind(this)，綁定this的指向。

定義一個(gè)數(shù)組保存匹配的文件，另外匹配文件的變動(dòng)會(huì)觸發(fā)doImport()事件

代碼就變成了這樣

class SmartImport {
    constructor({ from, ignored }) {
        this.from = from
        this.ignored = ignored
        this.extname = path.extname(from)
        this.modules = []
    }

    watch() {
        const { from, ignored, extname, modules } = this
        chokidar
            .watch(path.dirname(from), {
                ignoreInitial: true,
                ignored
            })
            .on(
                "add",
                this.checkExt(file => {
                    console.log("add", file)
                    modules.push(file)
                    this.doImport()
                })
            )
            .on(
                "unlink",
                this.checkExt(file => {
                    console.log("unlink", file)
                    _.remove(modules, p => p === file)
                    this.doImport()
                })
            )
    }

    checkExt(cb) {
        const { extname } = this
        return file => {
            if (path.extname(file) === extname) {
                cb(file)
            }
        }
    }

    doImport() {
        console.log("doImport...")
        console.log(this.modules)
    }
}

注意，我又把this.checkExt = this.checkExt.bind(this)給刪了，還是直接通過(guò)this.checkExt()調(diào)用方便，雖然代碼看起來(lái)凌亂了。

另外就是把this.doImport()又寫了兩遍。嗯，思考一下。其實(shí)modules變化，就應(yīng)該觸發(fā)doImport()。

發(fā)布-訂閱模式有木有

所以添加了個(gè)類ModuleEvent

class ModuleEvent {
    constructor() {
        this.modules = []
        this.events = []
    }

    on(event) {
        this.events.push(event)
    }

    emit(type, val) {
        if (type === "push") {
            this.modules[type](val)
        } else {
            _.remove(this.modules, p => p === val)
        }
        for (let i = 0; i < this.events.length; i++) {
            this.events[i].apply(this, [type, this.modules])
        }
    }
}

同時(shí)修改類SmartImport

class SmartImport {
    constructor({ from, ignored }) {
        this.from = from
        this.ignored = ignored
        this.extname = path.extname(from)
        this.moduleEvent = new ModuleEvent()
    }

    init() {
        this.moduleEvent.on((type, modules) => {
            this.doImport(type, modules)
        })
        this.watch()
    }

    watch() {
        const { from, ignored, extname, modules } = this
        chokidar
            .watch(path.dirname(from), {
                ignoreInitial: true,
                ignored
            })
            .on(
                "add",
                this.checkExt(file => {
                    console.log("add", file)
                    this.moduleEvent.emit("push", file)
                })
            )
            .on(
                "unlink",
                this.checkExt(file => {
                    console.log("unlink", file)
                    this.moduleEvent.emit("remove", file)
                })
            )
    }

    checkExt(cb) {
        const { extname } = this
        return file => {
            if (path.extname(file) === extname) {
                cb(file)
            }
        }
    }

    doImport(type, modules) {
        console.log(`type: ${type}`)
        console.log(modules)
    }
}

let smartImport = new SmartImport(config)
smartImport.init()

終于理解了很多庫(kù)中on方法的原理有木有！對(duì)象中有個(gè)events，專門存這些回調(diào)函數(shù)有木有

另外我們觀察chokidar.on(eventType, cb)，對(duì)比自己的moduleEvent.on(cb)。想想也是，也許我只想監(jiān)聽(tīng)特定的事件呢

修改ModuleEvent

class ModuleEvent {
    constructor({ from, ignored }) {
        this.modules = glob.sync(from, {
            ignore: ignored
        })
        this.events = {}
    }

    on(type, cb) {
        if (!this.events[type]) {
            this.events[type] = []
        }
        this.events[type].push(cb)
    }

    emit(type, val) {
        if (type === "push") {
            this.modules[type](val)
        } else {
            _.remove(this.modules, p => p === val)
        }
        for (let i = 0; i < this.events[type].length; i++) {
            this.events[type][i].apply(this, [this.modules])
        }
    }
}

后來(lái)覺(jué)得這個(gè)套路挺常見(jiàn)，將其抽象出來(lái)，最后形成代碼如下

#!/usr/bin/env node
const fs = require("fs")
const path = require("path")
const glob = require("glob")
const chokidar = require("chokidar")
const _ = require("lodash")
const config = JSON.parse(fs.readFileSync("smart-import.json"))

const CustomEvent = (() => {
    let events = {}
    let on = (type, cb) => {
        if (!events[type]) {
            events[type] = []
        }
        events[type].push(cb)
    }
    let emit = (type, data) => {
        for (let i = 0; i < events[type].length; i++) {
           events[type][i].apply(this, [data])
        }
    }
    return {
        on,
        emit
    }
})()

class SmartImport {
    constructor({ from, ignored }) {
        this.from = from
        this.ignored = ignored
        this.extname = path.extname(from)
        this.modules = glob.sync(from, {
            ignore: ignored
        })
    }

    init() {
        CustomEvent.on("push", m => {
            console.log("Do pushing")
            this.modules.push(m)
        })
        CustomEvent.on("remove", m => {
            console.log("Do removing")
            _.remove(this.modules, p => p === m)
        })
        this.watch()
    }

    watch() {
        const { from, ignored, extname, modules } = this
        chokidar
            .watch(path.dirname(from), {
                ignoreInitial: true,
                ignored
            })
            .on(
                "add",
                this.checkExt(file => {
                    CustomEvent.emit("push", file)
                })
            )
            .on(
                "unlink",
                this.checkExt(file => {
                    CustomEvent.emit("remove", file)
                })
            )
    }

    checkExt(cb) {
        const { extname } = this
        return file => {
            if (path.extname(file) === extname) {
                cb(file)
            }
        }
    }
}

let smartImport = new SmartImport(config)
smartImport.init()