wxml loader

wxml-loader

WXML-Loader für Webpack

Bitte beachten Sie, dass es sich bei dieser WXML um eine Auszeichnungssprache für Wechat-Miniprogramme handelt

Installation

yarn add -D wxml-loader

Verwendung

Möglicherweise müssen Sie zum Extrahieren von Dateien auch den File-Loader verwenden.

 {
  test : / .wxml$ / ,
  include : / src / ,
  use : [
    {
      loader : 'file-loader' ,
      options : {
        name : '[name].[ext]' ,
        useRelativePath : true ,
        context : resolve ( 'src' ) ,
      } ,
    } ,
    {
      loader : 'wxml-loader' ,
      options : {
        root : resolve ( 'src' ) ,
        enforceRelativePath : true ,
      } ,
    } ,
  ] ,
} 

Optionen

• root (String): Root-Pfad für benötigte Quellen
• enforceRelativePath (Boolescher Wert): Sollte wahr sein, wenn Sie für jede Datei eine relative root -URL generieren möchten. Es wird empfohlen, den Wert auf true zu setzen
• publicPath (String): Standardmäßig Webpack-Ausgabe.publicPath
• transformContent(content, resource) (Funktion): Inhalt transformieren, sollte eine Inhaltszeichenfolge zurückgeben
• transformUrl(url, resource) (Funktion): URL transformieren, sollte eine URL zurückgeben
• minimize (Boolean): Minimieren. Der Standardwert ist false
• Alle HTML-Minifier-Optionen werden unterstützt

Bekannte Probleme

Derzeit konnte wxml-loader den dynamischen Pfad nicht auflösen, z. B. <image src="./images/{{icon}}.png" /> . Bitte verwenden Sie copy-webapck-plugin um diese Ressourcen manuell in das Verzeichnis dist zu kopieren. Weitere Informationen finden Sie unter Nr. 1 (Chinesisch).

Für Alipay-Miniprogramme

Dieser Loader ist auch mit Alipay Mini-Programmen kompatibel. Sie müssen nur sicherstellen, dass Sie test: /.axml$/ anstelle von test: /.wxml$/ in der Webpack-Konfiguration verwenden.

Wenn Sie wxapp-webpack-plugin verwenden und Targets.Alipay als Webpack-Ziel festlegen, werden standardmäßig automatisch die Optionen transformContent() und transformUrl() festgelegt. Die Funktion transformContent() wandelt das Attribut wx:attr in a:attr . und die Funktion transformUrl() wandelt die Erweiterung .wxml automatisch in .axml um. Das bedeutet, dass Sie einmal Miniprogramme schreiben und sowohl Wechat- als auch Alipay-Miniprogramme erstellen können.

Beispiel

webpack.config.babel.js

 import WXAppWebpackPlugin , { Targets } from "wxapp-webpack-plugin" ;
export default env => ( {
  // ...other
  target : Targets [ env . target || "Wechat" ] ,
  module : {
    rules : [
      // ...other,
      {
        test : / .wxml$ / ,
        use : [
          {
            loader : "file-loader" ,
            options : {
              name : `[name]. ${ env . target === "Alipay" ? "axml" : "wxml" } `
              useRelativePath : true ,
              context : resolve ( 'src' ) ,
            } ,
          } ,
          {
            loader : 'wxml-loader' ,
            options : {
              root : resolve ( 'src' ) ,
              enforceRelativePath : true ,
            } ,
          } ,
        ]
      }
    ]
  } ,
  plugin : [
    // ...other
    new WXAppWebpackPlugin ( )
  ]
} ) ; 

Verwandt

Für eine vollständige Gilde, die webpack zur Entwicklung WeiXin App verwendet, schauen Sie sich bitte mein wxapp-boilerplate-Repo an.

Lizenz

MIT