wxml loader - wxml loader تحميل

wxml loader

كود الذكاء الاصطناعي

Add webpack 4 support

تنزيل

wxml-loader

محمل WXML لحزمة الويب

يرجى ملاحظة أن wxml هذه هي لغة ترميزية لبرامج Wechat mini

تثبيت

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 (Boolean): يجب أن يكون صحيحًا إذا كنت ترغب في إنشاء عنوان URL root لكل ملف. يوصى بضبطه على 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 لنسخ هذا المورد إلى دليل التوزيع يدويًا. انظر رقم 1 لمزيد من التفاصيل (الصينية).

لبرامج Alipay المصغرة

هذا المحمل متوافق أيضًا مع برامج Alipay mini. تحتاج فقط إلى التأكد من استخدام test: /.axml$/ بدلاً من test: /.wxml$/ في تكوين حزمة الويب.

إذا كنت تستخدم wxapp-webpack-plugin وقمت بتعيين Targets.Alipay كهدف لحزمة الويب، فسوف تقوم تلقائيًا بتعيين خيار 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 ( )
  ]
} ) ;