Conception et mise en œuvre du chargeur de convertisseur d'applet WeChat-Développement de mini-programmes-php.cn

Conception et mise en œuvre du chargeur de convertisseur d'applet WeChat

coldplay.xixi

Libérer： 2020-11-19 17:36:12

avant

3843 Les gens l'ont consulté

Tutoriel de développement de mini-programmesLa colonne présente la conception et la mise en œuvre du chargeur.

La configuration du chargeur dans le fichier de configuration

peut être adaptée en fonction au fichier de configuration Accédez à la règle et exécutez le chargeur correspondant.

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

Copier après la connexion

Implémentation spécifique du chargeur
Prenons jsLoader comme exemple, recevez le code source en paramètre, et renvoyez le nouveau code source obtenu après compilation

// 前几篇中封装的js转换器
const JsParser = require(&#39;./JsParser&#39;)
function loader(source) {
    
    const jsParser = new JsParser()
    let ast = jsParser.parse(source)
    ast = jsParser.astConverter(ast)
    return jsParser.astToCode(ast)
}
module.exports = loader

Copier après la connexion

Différentes sélections de fichiers correspondant au chargeur

// 重写Analyze函数中的analyzeFileToLoard文件分析部分
function Analyze(filePath, outputPath){
    if (fs.statSync(filePath).isDirectory()) {
        const files = fs.readdirSync(filePath)
        files.forEach(file => {
            const currentFilePath = filePath+&#39;/&#39;+file
            const currentOutputPath = outputPath+&#39;/&#39;+file
            if(fs.statSync(currentFilePath).isDirectory()) {
                fs.mkdirSync(currentOutputPath)
                Analyze(currentFilePath, currentOutputPath)
            } else analyzeFileToLoard(currentFilePath, currentOutputPath)
        })
    } else analyzeFileToLoard(filePath, outputPath)
}

Copier après la connexion

function analyzeFileToLoard(inputPath, outputPath) {
    let source = readFile(inputPath) // 读取源码
    const loaders = config.module
    loaders.forEach(loader => { // 遍历配置文件，看是否有匹配文件的loader规则
        if (loader.test.test(inputPath)) {
            // 使用loader
            source = useLoader(source, loader.loader, outputPath)
            // 输出路径处理函数
            if (loader.outputPath) outputPath = loader.outputPath(outputPath)
        }
    })
    writeFile(outputAppPath(outputPath), source) // 将处理过后的源码写入文件
}

Copier après la connexion

filtrage et exécution du chargeur

l'exécution du chargeur est une exécution en ordre inverse, exécutée à partir de de droite à gauche. Ici, nous utilisons d'abord le chargeur synchrone pour discuter.
Il y a une étape de pitch avant l'exécution du chargeur. J'estime que la méthode de dénomination du pitch n'est pas particulièrement adaptée, je préfère l'appeler l'étape de filtrage. Tout d'abord, exécutez la méthode pitch sur le chargeur de manière séquentielle. Si le pitch a une valeur de retour, le chargeur exécuté avant le chargeur ne sera plus exécuté.

function useLoader(source, loaders = []) {
    // 执行loader存储列表
    const loaderList = []
    // 递归去筛选需要执行的loader
    function loaderFilter(loaders) {
        const [firstLoader, ...ortherLoader] = loaders
        if (loaders.length === 0) return
        // 执行pitch，并将剩余的loader传入作为参数
        if (firstLoader.pitch && firstLoader.pitch(ortherLoader)) return ortherLoader
        else {
            // 将可用loader加入待执行列表
            loaderList.push(firstLoader)
            // 剩余loader作为参数 递归调用
            loaderFilter(ortherLoader)
        }
    }
    // 大概，暂时用不到。。。
    const remainLoader = loaderFilter(loaders)
    // 同步loader逆序执行
    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
}

Copier après la connexion

Expérience
Écrivez un signLoader pour voir si le chargeur peut être exécuté dans l'ordre inverse comme nous le pensions

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

Copier après la connexion

Résultat :

Ceci C'est facile La partie chargeur est considérée comme terminée, mais écrire de cette façon ne peut exécuter que certains chargeurs synchrones, et les chargeurs asynchrones ne peuvent pas attendre la fin de l'exécution avant d'écrire.

Conception et mise en œuvre du chargeur de convertisseur dapplet WeChat