国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自動 Import 工具,前端打字員的自我救贖

DevYK / 1543人閱讀

摘要:自動工具先推薦兩個干貨,關于正則的,,前者驗證正則是否和預期一樣,后者以圖的形式表達正則,有助于理解天書般的別人寫的正則作為一個前端打字員,一個經常遇到的場景就是在路由文件中引入模塊,比如這樣在中寫入如果修改了模塊的名字,增加了模塊或者刪

自動 import 工具

先推薦兩個干貨,關于正則的
regexr,regexper,前者驗證正則是否和預期一樣,后者以圖的形式表達正則,有助于理解天書般的別人寫的正則

作為一個前端打字員,一個經常遇到的場景就是在路由文件中引入模塊,比如這樣

router/index.js 中寫入

import Vue from "vue"
import Router from "vue-router"

const About = () => import("../pages/About.vue")
const Home = () => import("../pages/Home.vue")

Vue.use(Router)
...

如果修改了模塊的名字,增加了模塊或者刪除了模塊,就需要重新修改這個路由文件

總是做這么機械的事情無異于消耗我這個前端打字員的壽命

不能忍,遂寫個工具

整理思路如下

其中,監視目錄下文件的變動依靠的是 node API 中fs.watch(filename[, options][, listener])

替換目標文件中引入模塊的部分,則是通過正則來實現

在這里五星推薦一個驗證正則是否正確的網站,regexr

代碼實現

監視包含模塊的目錄

fs.watch(dir, {
  recursive: true // 目錄下子目錄也被監視
}, (event, filename) => { 
// event 是文件變動的類型,添加文件、刪除文件和修改文件名都是"rename" 事件
// filename 是變化的文件或目錄
  if(event === "rename"){ // 判斷文件變動類型
    
  }
})

當發生rename事件后,需要重新獲得目錄下(from)所有的模塊,包括模塊名moduleName,模塊文件相對于引用模塊文件(to)的相對路徑modulePath,將它們存入變量modules

實際項目中,模塊通常都是.vue文件,或者.jsx文件,因此只將這些作為模塊,在路由文件中引用

另外有些模塊文件因為各種原因,希望人工引入,而不被watch,這樣的文件存入excludeArr

const _ = require("lodash")
let excludeArr = [...]
let modules = []
let extname = ".vue"
let from = "./src/pages"
let to = "./src/router/index.js""

const mapDir = d => {
    // 獲得當前文件夾下的所有的文件夾和文件
    const [dirs, files] = _(fs.readdirSync(d)).partition(p =>
        fs.statSync(path.join(d, p)).isDirectory()
    )

    // 映射文件夾
    dirs.forEach(dir => {
        modules.concat(mapDir(path.join(d, dir)))
    })

    // 映射文件
    files.forEach(file => {
        // 文件后綴名
        let filename = path.join(d, file)
        if (path.extname(file) === extname) {
            if (!excludeArr.includes(path.resolve(__dirname, filename))) {
                let moduleName = path.basename(file, extname)
                // 若存在 -
                if (moduleName.match("-")) {
                    moduleName = moduleName.replace(
                        /(-)(.{1})/,
                        (match, p1, p2, offset, string) => p2.toUpperCase()
                    )
                }
                modules.push({
                    moduleName,
                    modulePath: path.relative(path.dirname(to), filename)
                })
            }
        }
    })
}

生成好新的待引入的模塊后,接下來就是在路由文件中,將對應的內容替換掉

所以需要讀寫文件以及正則替換

                const regex = //*sautoImport(.*
)*/*sautoImports*//g
                let importStr = ""
                modules.forEach((m, index) => {
                    importStr =
                        importStr +
                        fillTemplate(template, m.moduleName, m.modulePath) +
                        (cache.length - 1 === index ? "" : "
")
                })
                fs.readFile(to, "utf8", (err, data) => {
                    if (err) return console.log(err)
                    let result = ""
                    if (data.match(regex)) {
                        result = data.replace(
                            regex,
                            `/* autoImport */
${importStr}
/* autoImport */`
                        )
                    } else {
                        /* 首次插入在文件最后的import插入 */
                        result = data.replace(
                            /(.*import.*)(
)([^(import)])/,
                            (match, p1, p2, p3, offset, string) => {
                                return `${p1}
/* autoImport */
${importStr}
/* autoImport */
${p3}`
                            }
                        )
                    }

                    fs.writeFile(to, result, "utf8", err => {
                        if (err) return console.log(err)
                    })
                })

其中//*sautoImport(.* )*/*sautoImports*//g是用于匹配兩段注釋/* autoImport */及其中間的內容

import Vue from "vue"
import Router from "vue-router"
/* autoImport */
const About = () => import("../pages/About.vue")
const Home = () => import("../pages/Home.vue")
/* autoImport */

Vue.use(Router)

當第一次使用,沒有/* autoImport */時,就需要在最后一個import后面,插入引入的模塊

data.replace(
                            /(.*import.*)(
)([^(import)])/,
                            (match, p1, p2, p3, offset, string) => {
                                return `${p1}
/* autoImport */
${importStr}
/* autoImport */
${p3}`

在這里還可以自定義了引入模塊的方式,例如懶加載,"const moduleName = () => import(modulePath)"

const template = "const moduleName = () => import(modulePath)"
const fillTemplate = (template, moduleName, modulePath) =>
    template
        .replace("moduleName", moduleName)
        .replace("modulePath", `"${modulePath}"`)

為了工具的靈活性,把可配置項寫成json文件的形式

{
    "extname": ".vue",
    "from": "src/pages",
    "to": "src/router/index.js",
    "template": "const moduleName = () => import(modulePath)",
    "exclude": [
        "./src/pages/login.vue",
        "./src/pages/404.vue",
        "./src/pages/overall/**",
        "./src/pages/account-result/**"
    ]
}

然后通過以下的方式來獲得

const config = fs.readFileSync("./autoImport.json")
const { extname, from, to, template, exclude } = JSON.parse(config)
后記

下一步準備把這個工具寫成webpack的插件,名字我都起好了,AutoImportPlugin,先在github上占了個坑,順手給顆星,不用改Bug

同時準備用更加成熟的模塊chokidar來代替原生的watch

工具有問題提issue啊

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92311.html

相關文章

  • 記第一次發布npm包經歷,smart-import

    摘要:故事背景前情提要自動工具,前端打字員的自我救贖的功能根據配置文件,在目標文件中自動導入規定目錄下自定義模塊,并監聽規定目錄下文件的變動,自動更新尚在測試中的使用安裝工具編寫配置文件需要自動導入的模塊的后綴名自動導入的模塊的來源目 故事背景 前情提要:自動 Import 工具,前端打字員的自我救贖 github: smart-import smart-import 的功能 根據配置文件...

    Raaabbit 評論0 收藏0
  • 重構smart-import

    摘要:前情提要自動工具,前端打字員的自我救贖記第一次發布包經歷,是重構中的代碼是版本可以工作的代碼配置文件待導入的模塊引用模塊的文件引用模塊的方式忽略的模塊實現監聽文件的刪除和添加以上代碼主要使用了來監聽文件的變化。 前情提要 自動 Import 工具,前端打字員的自我救贖 記第一次發布npm包經歷,smart-import GitHub:smart-import develop是重構中的代...

    Pocher 評論0 收藏0
  • 一道多線程面試題引起自我救贖

    摘要:重溫一個面試題內容數組內容為數組內容為個英文字母,使用兩個線程分別輸入兩個數組,打印內容為這樣的規律提取一下核心內容,去除次要內容兩個線程需要交替執行,打印數字的線程需要先執行,數組打印完畢后線程需要結束。 一道多線程面試題引起的自我救贖 近日去一個知名互聯網企業參加面試,之前準備多多信心滿滿,但是面試一開始就是一道不起眼的編程題 數組A內容為 1,2,3,4...52 ,數組B內容...

    BaronZhang 評論0 收藏0
  • 普通大一學生自我反思

    摘要:聽了鵬哥的教導,也開始寫起了博客現在多粉,感覺都是機器人哈哈,最近粉絲也不漲了,不知道是不是我最近不發文章的原因。這一個多月,基本就是學刷算法題。在這里不得不吐槽一下學校,每條早上做早操,晚自習到點,感覺浪費了我很多學習技術的時間。 ...

    callmewhy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<