airyland/vux

Hi, vux-loader is coming soon

airyland opened this issue · 4 comments

airyland commented

vux!vue hack into vue-loader

配合 vux 2.x 把内部使用的工具vux-loader也开源。主要作用是可以对vue-loader处理后的代码进行自定义处理。

vux-loader不是为vux组件专门设计的，它是针对vue+webpack项目的工程化工具，简化了webpack插件和loader的使用和编写，支持在vue-loader之后进行自定义代码处理，同时内置对vux组件专用的配置和优化插件。

需要注意的是，vux loader 提供了灵活的代码操作方法，但是同时也牺牲了部分构建性能。当然这个在后面会逐渐优化。

下面为第一版文档草稿，如果你在vue+webpack的项目上遇到不好解决的工程问题，可以提出来讨论讨论。

安装

将和vux@2.x一起发布到npm，请等待几天。

使用

使用vux-loader的merge方法在原有webpack配置上添加vux插件(适用于webpack@1.x 同时支持webpack@1.x 和 webpack@2.x)

module.exports = vuxLoader.merge(oldConfig, {
   options: {}
   plugins: []
})

内置插件

i18n 支持

计划已经支持在.vue文件里使用自定义标签<i18n>来配置多语言, yml 格式，可以不写en默认和key一致

<i18n>
 title: 
  zh-CN: 标题
 content:
   en: content
   zh-CN: 内容
</i18n>

vux js 源码babel编译

之前需要自己配置，现在直接内置在vux-loader里了

vux组件引入解构

原来使用import {Group, Cell } from 'vux'会导致打包资源太大，而单独引入也比较繁琐，因此使用vux-loader后可以轻松很多

import { Group, Cell, AlertPlugin } from 'vux' // 会被vux-loader自动拆分成单个组件和插件引入

妈妈再也不担心我写那么多代码了

script-parser script代码替换处理

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

style-parser style代码替换处理

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

template-parser template代码替换处理

适用于对<template></template>模板代码做自定义处理
适用于某些更改不频繁但非服务端配置的文字，可能调用多次，也可能手动更改或者批量替换相对麻烦

同样你也可以用来从接口获取最新配置替换特定的占位字符

当然也适用于在源码中对pm进行吐槽(千万要记得production环境要有配置，否则就有大新闻了)

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

插件配置：

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

less 变量设置和替换

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

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

插件配置：

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

css 重复代码清除

在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。

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

构建完成提醒（仅mac可用）

使用即将开放的暂时不公开名字推送服务。当进行一个耗时很长的项目构建时，可以使用该插件在构建完成得到系统推送通知。趁此时间，可以放放羊，看看文章，妈妈再也不用担心我几分钟无聊地盯着构建界面了。

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)
   }
  }
}

构建文件生成事件回调

即webpack的emit事件，只允许创建一个插件实例

{
  name: 'build-emit-callback',
  fn: function (compilation, callback)  {
    callback() // 必须
  }
}

构建完成事件回调

本质上是在webpack plugin的 done 事件后触发

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

自定义loader

可以针对template, style, script 指定自已编写的loader

wg5945 commented

大神威武，期待vux@2.x

jiangjiang01 commented

终于等到你，还好我没放弃 - vux@2x

waykyho commented

什么时候发布啊？又等了几天了。

airyland commented

Move to #715