這篇文章主要介紹了微信小程序轉(zhuǎn)換器之loader的實(shí)現(xiàn)方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，包括做網(wǎng)站、網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10余年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。

配置文件中的loader配置

可以根據(jù)配置文件匹配到到規(guī)則，去執(zhí)行相應(yīng)的loader。

// analyze.config.js
// 引入loader
const jsLoader = require('./lib/jsLoader')
const jsonLoader = require('./lib/jsonLoader')
const cssLoader = require('./lib/cssLoader')
const htmlLoader = require('./lib/htmlLoader')
const signLoader = require('./lib/signLoader')
const config = {
    entry: './',
    output: {
        name: 'dist',
        src: './'
    },
    module: [
        {
            test: /\.js$/,
            loader: [signLoader, jsLoader],
        },
        {
            test: /\.wxss$/,
            loader: [cssLoader],
            outputPath: (outputPath) => outputPath.replace('.wxss', '.acss')
        },
        {
            test: /\.wxml$/,
            loader: [htmlLoader],
            outputPath: (outputPath) => outputPath.replace('.wxml', '.axml')
        },
        {
            test: /\.json$/,
            loader: [jsonLoader],
        },
    ]
}
module.exports = config

具體loader實(shí)現(xiàn)
以jsLoader為例子，接收源碼作為參數(shù)，返回編譯后獲得的新的源碼

// 前幾篇中封裝的js轉(zhuǎn)換器
const JsParser = require('./JsParser')
function loader(source) {
    
    const jsParser = new JsParser()
    let ast = jsParser.parse(source)
    ast = jsParser.astConverter(ast)
    return jsParser.astToCode(ast)
}
module.exports = loader

不同文件選擇對(duì)應(yīng)loader

// 重寫Analyze函數(shù)中的analyzeFileToLoard文件分析部分
function Analyze(filePath, outputPath){
    if (fs.statSync(filePath).isDirectory()) {
        const files = fs.readdirSync(filePath)
        files.forEach(file => {
            const currentFilePath = filePath+'/'+file
            const currentOutputPath = outputPath+'/'+file
            if(fs.statSync(currentFilePath).isDirectory()) {
                fs.mkdirSync(currentOutputPath)
                Analyze(currentFilePath, currentOutputPath)
            } else analyzeFileToLoard(currentFilePath, currentOutputPath)
        })
    } else analyzeFileToLoard(filePath, outputPath)
}

function analyzeFileToLoard(inputPath, outputPath) {
    let source = readFile(inputPath) // 讀取源碼
    const loaders = config.module
    loaders.forEach(loader => { // 遍歷配置文件，看是否有匹配文件的loader規(guī)則
        if (loader.test.test(inputPath)) {
            // 使用loader
            source = useLoader(source, loader.loader, outputPath)
            // 輸出路徑處理函數(shù)
            if (loader.outputPath) outputPath = loader.outputPath(outputPath)
        }
    })
    writeFile(outputAppPath(outputPath), source) // 將處理過后的源碼寫入文件
}

loader過濾和執(zhí)行

loader執(zhí)行是個(gè)逆序的執(zhí)行，從右邊向左依次執(zhí)行。在這里我們先用同步的loader來做討論。
loader執(zhí)行前還有個(gè)pitch階段，感覺pitch這個(gè)起名方式并不是特別合適，我更愿意叫它過濾篩選階段。先去順序執(zhí)行l(wèi)oader上的pitch方法，要是pitch有返回值，就不再執(zhí)行在該loader之前執(zhí)行的loader。

function useLoader(source, loaders = []) {
    // 執(zhí)行l(wèi)oader存儲(chǔ)列表
    const loaderList = []
    // 遞歸去篩選需要執(zhí)行的loader
    function loaderFilter(loaders) {
        const [firstLoader, ...ortherLoader] = loaders
        if (loaders.length === 0) return
        // 執(zhí)行pitch，并將剩余的loader傳入作為參數(shù)
        if (firstLoader.pitch && firstLoader.pitch(ortherLoader)) return ortherLoader
        else {
            // 將可用loader加入待執(zhí)行列表
            loaderList.push(firstLoader)
            // 剩余l(xiāng)oader作為參數(shù) 遞歸調(diào)用
            loaderFilter(ortherLoader)
        }
    }
    // 大概，暫時(shí)用不到。。。
    const remainLoader = loaderFilter(loaders)
    // 同步loader逆序執(zhí)行
    function runLoader(source, loaderList) {
        const loader = loaderList.pop()
        let newSource = loader(source)
        if (loaderList.length > 0) return runLoader(newSource, loaderList)
        else return newSource
    }
    source = runLoader(source, loaderList)
    return source
}

實(shí)驗(yàn)
寫個(gè)signLoader，看看loader能不能像我們想的那樣逆序執(zhí)行

function loader(source) {
let sign = `/**
* @Author： LY
*/
`
    source = sign + source
    return source
}
module.exports = loader

結(jié)果：

這樣簡(jiǎn)易的loader部分算是完成了，但這么寫只能執(zhí)行一些同步的loader，異步的loader無法等待執(zhí)行完成后再寫入。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序轉(zhuǎn)換器之loader的實(shí)現(xiàn)方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

本文標(biāo)題：微信小程序轉(zhuǎn)換器之loader的實(shí)現(xiàn)方法
本文來源：http://chinadenli.net/article14/pddege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、建站公司、網(wǎng)站設(shè)計(jì)公司、云服務(wù)器、面包屑導(dǎo)航、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)