Téléchargement wxml loader - Téléchargement du code source wxml loader

wxml loader

Code Source AI

Add webpack 4 support

Télécharger

chargeur wxml

chargeur wxml pour webpack

Veuillez noter que ce wxml est un langage de balisage pour les mini-programmes Wechat.

Installation

yarn add -D wxml-loader

Usage

Vous devrez peut-être également utiliser un chargeur de fichiers pour extraire des fichiers.

 {
  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 ,
      } ,
    } ,
  ] ,
}

Possibilités

root (String) : chemin racine pour exiger les sources
enforceRelativePath (Boolean) : doit être vrai si vous souhaitez générer une URL relative root pour chaque fichier. Il est recommandé de définir sur true
publicPath (String) : par défaut, webpack output.publicPath
transformContent(content, resource) (Fonction) : Transformer le contenu, doit renvoyer une chaîne de contenu
transformUrl(url, resource) (Fonction) : Transformer l'url, doit renvoyer une URL
minimize (booléen) : minimiser. La valeur par défaut est false
Toutes les options de minificateur HTML sont prises en charge

Problèmes connus

Actuellement, wxml-loader n'a pas pu résoudre le chemin dynamique, c'est-à-dire <image src="./images/{{icon}}.png" /> . Veuillez utiliser copy-webapck-plugin pour copier manuellement ces ressources dans le répertoire dist. Voir #1 pour plus de détails (chinois).

Pour les mini-programmes Alipay

Ce chargeur est également compatible avec les mini programmes Alipay. Vous devez simplement vous assurer d'utiliser test: /.axml$/ au lieu de test: /.wxml$/ dans la configuration du webpack.

Si vous utilisez wxapp-webpack-plugin et définissez Targets.Alipay comme cible du webpack, il définira automatiquement les options transformContent() et transformUrl() par défaut, la fonction transformContent() transformera l'attribut wx:attr en a:attr , et la fonction transformUrl() transformera automatiquement l'extension .wxml en .axml . Cela signifie que vous pouvez écrire des mini-programmes une seule fois et créer des mini-programmes Wechat et Alipay.

Exemple

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 ( )
  ]
} ) ;