ดาวน์โหลด wxml loader - ดาวน์โหลด wxml loader ซอร์สโค้ด

wxml loader

โค้ดแหล่งที่มา AI

Add webpack 4 support

ดาวน์โหลด

wxml-โหลดเดอร์

ตัวโหลด wxml สำหรับ webpack

โปรดทราบว่า 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 (บูลีน): ควรเป็นจริงหากคุณต้องการสร้าง 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 เพื่อคัดลอกทรัพยากรเหล่านั้นไปยังไดเร็กทอรี dist ด้วยตนเอง ดูรายละเอียด #1 (ภาษาจีน)

สำหรับมินิโปรแกรมอาลีเพย์

ตัวโหลดนี้ยังเข้ากันได้กับมินิโปรแกรม Alipay คุณเพียงแค่ต้องแน่ใจว่าใช้ test: /.axml$/ แทน test: /.wxml$/ ในการกำหนดค่า webpack

หากคุณใช้ 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 ( )
  ]
} ) ;