wxml loaderダウンロード - wxml loaderソースコードダウンロード

wxml loader

AI ソースコード

Add webpack 4 support

ダウンロード

wxml-ローダー

Webpack 用の wxml ローダー

この wxml は Wechat ミニプログラム用のマークアップ言語であることに注意してください。

インストール

yarn add -D wxml-loader

使用法

ファイルを抽出するためにファイルローダーを使用する必要がある場合もあります。

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

オプション

root (文字列): 必要なソースのルートパス
enforceRelativePath (ブール値): 各ファイルのroot相対 URL を生成する場合は true にする必要があります。 trueに設定することをお勧めします
publicPath (文字列): デフォルトは webpack Output.publicPath
transformContent(content, resource) (関数): コンテンツを変換します。コンテンツ文字列を返す必要があります。
transformUrl(url, resource) (関数): URL を変換し、URL を返す必要があります。
minimize (ブール値): 最小化します。デフォルトはfalse
すべての html-minifier オプションがサポートされています

既知の問題

現在、 wxml-loader動的パス、つまり<image src="./images/{{icon}}.png" />を解決できませんでした。 copy-webapck-plugin使用して、これらのリソースを dist ディレクトリに手動でコピーしてください。詳細については #1 を参照してください (中国語)。

Alipay ミニプログラムの場合

このローダーは Alipay ミニプログラムとも互換性があります。 Webpack 構成で test test: /.axml$/の代わりにtest: /.wxml$/を使用していることを確認する必要があります。

wxapp-webpack-plugin を使用し、 Targets.Alipay Webpack ターゲットとして設定している場合、デフォルトで、 transformContent()およびtransformUrl()オプションが自動的に設定され、 transformContent()関数はwx:attr属性をa:attrに変換します。そして、 transformUrl()関数は、 .wxml拡張子を.axmlに自動的に変換します。つまり、ミニプログラムを一度作成すれば、Wechat と Alipay の両方のミニプログラムを構築できるということです。

例

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