ホームページ > 記事 > WeChat アプレット > WeChat アプレット コンバータ ローダーの設計と実装
#設定ファイルのローダー設定は、次のように照合できます。設定ファイルに追加 ルールに移動し、対応するローダーを実行します。 // 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
// 前几篇中封装的js转换器 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別のファイル選択 ローダーに対応
// 重写Analyze函数中的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规则 if (loader.test.test(inputPath)) { // 使用loader source = useLoader(source, loader.loader, outputPath) // 输出路径处理函数 if (loader.outputPath) outputPath = loader.outputPath(outputPath) } }) writeFile(outputAppPath(outputPath), source) // 将处理过后的源码写入文件 }
ローダーのフィルタリングと実行
ローダーの実行は逆の順序で右から実行されます左へ。ここでは、まず同期ローダーを使用して説明します。 ローダーを実行する前にピッチステージがありますが、ピッチという命名方法はあまり適切ではないように感じますので、フィルタリングステージと呼びたいと思います。まず、ローダー上でピッチメソッドを順番に実行し、ピッチに戻り値があると、そのローダーより前に実行されていたローダーは実行されなくなります。
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 }
signLoaderを作成して、ローダーが予想どおりに逆の順序で実行できるかどうかを確認します
function loader(source) { let sign = `/** * @Author: LY */ ` source = sign + source return source } module.exports = loader
結果:これは、非常に単純 ローダー部分は完了したと見なされますが、この方法で記述すると一部の同期ローダーのみを実行でき、非同期ローダーは実行が完了するのを待ってから書き込むことができません。
関連する学習の推奨事項:
小プログラム開発チュートリアル
以上がWeChat アプレット コンバータ ローダーの設計と実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。