小program development tutorialThe column introduces the design and implementation of loader.

The loader configuration in the configuration file

can be matched according to the configuration file Go to the rule and execute the corresponding 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

Specific loader implementation
Take jsLoader as an example, receive the source code as a parameter, and return the new source code obtained after compilation

// 前幾篇中封裝的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

Different file selections Corresponding to loader

// 重寫(xiě)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) // 將處理過(guò)后的源碼寫(xiě)入文件
}

loader filtering and execution

loader execution is in reverse order, executed from right to left. Here we first use the synchronous loader to discuss.
There is a pitch stage before the loader is executed. I feel that the naming method of pitch is not particularly suitable. I prefer to call it the filtering stage. First, execute the pitch method on the loader sequentially. If the pitch has a return value, the loader executed before the loader will no longer be executed.

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
}

Experiment
Write a signLoader to see if the loader can be executed in reverse order as we thought

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

Result:

It’s so simple The loader part is considered completed, but writing this way can only execute some synchronous loaders, and asynchronous loaders cannot wait for execution to complete before writing.

Related learning recommendations: 小program development tutorial

The above is the detailed content of WeChat applet converter loader design and implementation. For more information, please follow other related articles on the PHP Chinese website!