1.0.4 • Published 5 years ago

wechat-mini-loader v1.0.4

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

一个微信小程序的loader

关于

解析类似vue语法文件 动态生成对应的wxml wxss js json等几个文件

基于wechat-mina-loader基础上做了些更改增加了对json标签的解析和输出配置文件,使用方式跟wechat-mina-loader完全一致。

安装

npm install -D wechat-mini-loader

使用方式 最简单的姿势

在webpack loader 引入mina的loader

  {
    test: /\.mina$/,
    loader: 'wechat-mini-loader',
    options: {
      path: r('../'),
      dist: './dist'
    }
  }	

引入之后会在根目录的 dist 文件夹下生成四份文件分别为

/pages/index/index.wxml
/pages/index/index.wxss
/pages/index/index.json
/pages/index/index.js

关于语法

模版用到了consolidate这一模板引擎来处理vue-template-compiler的parseComponent函数解出来的标签中的内容,所以支持一下模版语法

atpl
bracket
doT.js (website)
dust (unmaintained) (website)
dustjs-linkedin (maintained fork of dust) (website)
eco
ect (website)
ejs (website)
haml
haml-coffee
hamlet
handlebars (website)
hogan (website)
htmling
jade (website)
jazz
jqtpl
JUST
liquor
lodash (website)
marko (website)
mote (website)
mustache
nunjucks (website)
plates
pug (formerly jade) (website)
QEJS
ractive
react
slm
swig (unmaintained)
swig (maintained fork)
teacup
templayed
twig
liquid (website)
toffee
underscore (website)
vash
walrus (website)
whiskers

比如你想用 pug,那么在 template 标签中加入 lang="pug" 即可

css可以使用一下几种css编译神器,前提你需要安装对应的loader

stylus
less
scss
sass

比如你想用 sass,那么在 style 标签中加入 lang="sass" 即可

script标签使用babel转换过的 script 标签中的内容

如果需要单独json配置可以在文件使用以下格式,不写则不会生成对应json文件

<json>
  {
    "navigationBarTitleText": "查看启动日志"
  }    
</json>

高亮设置

将高亮设置为 vuecomponent 即可

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago