wxml loader下載 - wxml loader原始碼下載

wxml loader

Ai源碼

Add webpack 4 support

下載

wxml載入器

webpack 的 wxml 載入器

請注意這個wxml是微信小程式的標記語言

安裝

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) (Function)：轉換內容，應傳回內容字串
transformUrl(url, resource) (Function): 轉換 url，應該回傳一個 url
minimize （布林值）：最小化。預設為false
支援所有 html-minifier 選項

已知問題

目前wxml-loader無法解析動態路徑，即<image src="./images/{{icon}}.png" /> 。請使用copy-webapck-plugin手動將這些資源複製到 dist 目錄。詳細資訊請參閱#1（中文）。

對於支付寶小程式

該加載器還兼容支付寶小程式。你只需要確保在 webpack 設定中使用test: /.axml$/而不是test: /.wxml$/ 。

如果您使用 wxapp-webpack-plugin 並將Targets.Alipay設定為 webpack 目標，預設它會自動設定transformContent()和transformUrl()選項， transformContent()函數會將wx:attr屬性轉換為a:attr ，且transformUrl()函數會自動將.wxml副檔名轉換為.axml 。這意味著您可以編寫一次小程序，並同時建立微信和支付寶小程序。

例子

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