1. weex-vue-precompiler
a precompiler for weex-vue-render.
weex-vue-precompiler
Package: weex-vue-precompiler
Last modified: Tue, 24 May 2022 09:26:35 GMT
Version: 0.1.26
License: MIT
Downloads: 430

Install

npm install weex-vue-precompiler
yarn add weex-vue-precompiler

weex-vue-precompiler

build
pkg
down
Package Quality

weex-vue-precompiler is a node transformer plugin for vue-loader. The main purpose is to precompile nodes for weex-vue-render to reduce performance consumption in render's runtime.

Use this precompiler can save you a lot of render time for weex running on web using weex-vue-render.

How To Use

In you vue-loader config, you can use it like this:

 // require and init.
const precompile = require('weex-vue-precompiler')(/*optional config*/)

// in vue config:
{
  optimizeSSR: false,
  postcss: [
    require('postcss-plugin-weex')(),
    require('autoprefixer')({
      browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
    }),
    require('postcss-plugin-px2rem')({ rootValue: 75 })
  ],
  compilerModules: [
    {
      postTransformNode: el => precompile(el)
    }
  ],
}

config

  • autoprefixer: options for autoprefixer. default is { browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12'] }.
  • px2rem: options for postcss-plugin-px2rem. default is: { rootValue: 75 }. (NOTICE: We shouldn't change the value of rootValue here. If you want to change the viewport width, you better use <meta name="weex-viewport" content="..."> in your html entry file.)
  • aliweex: boolean. default is false. Tell whether aliweex components are included in your project.

feature

NOTE: This plugin should only work with weex-vue-render-next in pair, which is > 0.12.xx. The version before 0.13 is not compatible.

  • [x] support inline style autoprefix and px2rem converting.
  • [x] support tag name converting.
  • [x] support style normalization for weex-el, weex-ct, etc.
  • [x] add events to element attributes.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin