wxml loader

wxml-загрузчик

загрузчик 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 (Boolean): должно иметь значение true, если вы хотите создать относительный root URL-адрес для каждого файла. Рекомендуется установить значение true
• publicPath (String): по умолчанию используется выходной файл веб-пакета.publicPath.
• transformContent(content, resource) (Функция): Преобразование содержимого, должно возвращать строку содержимого.
• transformUrl(url, resource) (Функция): преобразовать URL-адрес, должен вернуть URL-адрес.
• minimize (логическое значение): минимизировать. По умолчанию false
• Поддерживаются все параметры html-минификатора.

Известные проблемы

В настоящее время wxml-loader не может разрешить динамический путь, т.е. <image src="./images/{{icon}}.png" /> . Используйте copy-webapck-plugin , чтобы вручную скопировать эти ресурсы в каталог dist. Подробности см. в № 1 (китайский).

Для мини-программ Alipay

Этот загрузчик также совместим с мини-программами Alipay. Вам просто нужно убедиться, что вы используете 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 ( )
  ]
} ) ; 

Связанный

Чтобы полная гильдия могла использовать webpack для разработки WeiXin App , ознакомьтесь с моим репозиторием wxapp-boilerplate.

Лицензия

Массачусетский технологический институт