wxml loader

cargador-wxml

Cargador wxml para paquete web

Tenga en cuenta que este wxml es un lenguaje de marcado para miniprogramas de Wechat.

Instalación

yarn add -D wxml-loader

Uso

Es posible que también necesite utilizar el cargador de archivos para extraer archivos.

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

Opciones

• root (Cadena): Ruta raíz para requerir fuentes
• enforceRelativePath (booleano): debe ser verdadero si desea generar una URL relativa root para cada archivo. Se recomienda establecerlo en true
• publicPath (Cadena): el valor predeterminado es la salida del paquete web.publicPath
• transformContent(content, resource) (Función): Transformar contenido, debe devolver una cadena de contenido
• transformUrl(url, resource) (Función): Transformar URL, debe devolver una URL
• minimize (booleano): minimizar. El valor predeterminado es false
• Todas las opciones de html-minifier son compatibles

Problemas conocidos

Actualmente, wxml-loader no pudo resolver la ruta dinámica, es decir, <image src="./images/{{icon}}.png" /> . Utilice copy-webapck-plugin para copiar esos recursos al directorio dist manualmente. Consulte el n.° 1 para obtener más detalles (chino).

Para mini programas Alipay

Este cargador también es compatible con los mini programas Alipay. Solo necesita asegurarse de usar test: /.axml$/ en lugar de test: /.wxml$/ en la configuración del paquete web.

Si está utilizando wxapp-webpack-plugin y configura Targets.Alipay como destino del paquete web, automáticamente configurará la opción transformContent() y transformUrl() de forma predeterminada, la función transformContent() transformará el atributo wx:attr en a:attr . y la función transformUrl() transformará la extensión .wxml a .axml automáticamente. Eso significa que puede escribir miniprogramas una vez y crear miniprogramas tanto de Wechat como de Alipay.

Ejemplo

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 un gremio completo utilice webpack para desarrollar WeiXin App , consulte mi repositorio wxapp-boilerplate.

Licencia

MIT