wxml loader

carregador wxml

carregador wxml para webpack

Observe que este wxml é uma linguagem de marcação para miniprogramas Wechat

Instalação

yarn add -D wxml-loader

Uso

Você também pode precisar usar o carregador de arquivos para extrair arquivos.

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

Opções

• root (String): Caminho raiz para exigir fontes
• enforceRelativePath (Boolean): Deve ser verdadeiro se você deseja gerar uma URL relativa root para cada arquivo. Recomenda-se definir como true
• publicPath (String): O padrão é webpack output.publicPath
• transformContent(content, resource) (Function): Transforma o conteúdo, deve retornar uma string de conteúdo
• transformUrl(url, resource) (Função): URL de transformação, deve retornar um URL
• minimize (Booleano): Para minimizar. O padrão é false
• Todas as opções de minificador de HTML são suportadas

Problemas conhecidos

Atualmente wxml-loader não conseguiu resolver o caminho dinâmico, ou seja <image src="./images/{{icon}}.png" /> . Use copy-webapck-plugin para copiar esses recursos para o diretório dist manualmente. Consulte o nº 1 para obter detalhes (chinês).

Para miniprogramas Alipay

Este carregador também é compatível com os miniprogramas Alipay. Você só precisa ter certeza de usar test: /.axml$/ em vez de test: /.wxml$/ na configuração do webpack.

Se você estiver usando wxapp-webpack-plugin e definindo Targets.Alipay como destino do webpack, ele definirá automaticamente as opções transformContent() e transformUrl() por padrão, a função transformContent() transformará o atributo wx:attr em a:attr , e a função transformUrl() transformará a extensão .wxml em .axml automaticamente. Isso significa que você pode escrever miniprogramas uma vez e criar miniprogramas Wechat e Alipay.

Exemplo

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

Relacionado

Para que uma guilda completa use webpack para desenvolver WeiXin App , verifique meu repositório wxapp-boilerplate.

Licença

MIT