vux-loader 插件列表

优质

小牛编辑

132浏览

2023-12-01

script-parser

.vue 文件的 script 部分代码处理

[{
 name: 'script-parser',
 fn: function (source) {
   return source.replace('VARIABLE', 'v2')
 }
}]

style-parser

<style></style> 代码处理

[{
 name: 'style-parser',
 fn: function (source) {
   return source.replace('black', 'white')
 }
}]

template-parser

template代码替换处理

适用于对<template></template>模板代码做自定义处理

name 插件名字， template-parser
replaceList 非必须，正则匹配列表，将直接调用 replace 方法进行替换
fn 非必须，相比params更灵活的方法，可以对字符串进行处理后返回

插件配置：

[
  name: "template-parser",
  replaceList: [{
    test: /DeathToPM/g,
    replaceString: '微博-随时随地发现新鲜事'
  }, {
    test: /呵呵我们压根没有底线/g,
    replaceString: '我是有底线的'
  }],
  fn: function (templateSource) {
    return templateSource.replace('智障', '机智')
  }
]

js-parser

项目里js文件处理，在babel-loader前进行处理

[{
 name: 'js-parser',
 fn: function (source) {
   return source.replace('black', 'white')
 }
}]

template-feature-switch

实现根据变量切换template代码

参数：

features，变量列表，值只能为true或者false

{
  name: 'template-feature-switch',
  features: {
    feature1: true,
    feature2: false
  }
}

<template>
  <div>
    <on feature="feature1">
      AWESOME FEATURE 1 is ON
    </on>
    <off feature="feature1">
      AWESOME FEATURE 1 is OFF
    </off>
  </div>
</template>

那么当 feature1 为 true时，将输出 AWESOME FEATURE 1 is ON, 反之则输出 AWESOME FEATURE 1 is OFF。注意on标签内不限定内容，可以为任何标签代码块，但避免在on off 里面再嵌套 on off

vux-ui

vux组件的配套工具，如果没有使用vux, 不需要添加。

如果配合vux使用，需要手动启用。默认不需要设置选项。

该插件做了以下处理：

配置babel编译 vux 的js源码
修改vue-loader为 vux-loader!vue-loader
import组件调用解析为单组件引入

{
  name: 'vux-ui'
}

那么你就可以很方便地引入组件了：

// 0.x
import Group from 'vux/src/components/group'
import Cell from 'vux/src/components/cell'

// 2.x
import { Group, Cell } from 'vux'

i18n

如果你只是调用中文语言的vux组件，那么你不需要做任何配置。
如果你需要调用英文语言的vux组件，需要配置语言

{
  name: 'i18n',
  vuxStaticReplace: true,
  vuxLocale: 'en'
}

如果你想和demo站点一样可以写i18nblock，并且需要动态切换语言，那么需要配置插件抽取i18n的内容，并设置非静态替换

{
  name: 'i18n',
  vuxStaticReplace: false,
  staticReplace: false,
  extractToFiles: 'src/locales/components.yml',
  localeList: ['en', 'zh-CN']
}

然后你就可以引用vuex-i18n插件实现多语言切换了。

参考 main.js 及 vuex-i18n 文档(仅当参考，你也可以使用其他i18n插件)。

less-theme

注意，path所在文件必须是简单的less变量对，不能import其他文件或者引入变量。

less 变量设置和替换

适用于全局变量替换, 方便切换主题
这意味着，你不再需要为每个页面引入全局的less文件了，你只需要设置lang为less就可以直接使用变量了

<style lang="less">
.info {
 color: @font-size;
}
</style>

插件配置：

{
  name: 'less-theme',
  path: 'src/styles/theme.less'
}

duplicate-style

css 重复代码清除

建议使用vux组件的用户使用，因为vux直接引用less，最终构建的css文件确实会有冗余。

在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。

{
  name: 'duplicate-style',
  events: {
    done: function () {
      console.log('done!')
    }
  }
}

html-build-callback

html文件处理事件回调

适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容
比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等

{
  name: 'html-build-callback',
  events: {
   'after-html-processing': function (data, cb) {
      data.html += 'magic footer'
      cb(null, data)
   }
  }
}

可用事件请参考 html-webpack-plugin

build-done-callback

构建完成事件回调
本质上是在webpack plugin的 done 事件后触发

{
 name: 'build-done-callback',
 fn: function () {
   console.log('done!')
 }
}