commit	cf83868fec1bf3e568a3b2946f9e346df4fcee97	[log] [tgz]
author	terrykingcha <terrykingcha@gmail.com>	Sun Jul 10 03:22:54 2016 +0800
committer	terrykingcha <terrykingcha@gmail.com>	Sun Jul 10 03:22:54 2016 +0800
tree	c1f83814694fdc0ea414b4fefd66190e7ca5b39c
parent	25d42794617de3195e8de4b35a0e3188abd51aad [diff]

tree: c1f83814694fdc0ea414b4fefd66190e7ca5b39c

README.md

Weex Loader

A webpack loader for Weex.

Install

npm install weex-loader babel-loader babel-preset-es2015 babel-runtime babel-plugin-transform-runtime --save

Feature

Can load .we file.
Can load parted files(.js/.css/.html) via a src attribute.
Can specify a custom language to chain any loader.
Can specify name when require .we file.
Can write es2015 in script.

Usage

How to load a `.we` file.

make a webpack config

var path = require('path');
var webpack = require('webpack');
var loader = require('weex-loader');

module.exports = {
  entry: './test/main.we?entry',
  output: {
    path: './test/actual',
    filename: 'main.js'
  },
  module: {
    loaders: [
      {
        test: /\.we(\?[^?]+)?$/,
        loader: 'weex'
      }
    ]
  }
};

How to write parted files

write .js/.css/.html anywhere

main.js as script

module.exports = {
    data: function () {
      return {
        text: 'Hello World'
      }
    }
}

main.css as style

.h1 {
    font-size: 60px;
    color: red;
}

main.html as template

<div>
    <text class="h1">{{text}}</text>
</div>

main.we

<template src="./main.html"></template>
<style src="./main.css"></style>
<script src="./main.js"></script>

add some custom language for loaders

append a weex config in webpack config

  weex: {
    lang: {
      jade: ['jade-html'] // a jade langauge will chain "jade-html-loader"
    }
  }

main.we

<template lang="jade">
div
  text Hello Weex
</template>

How to require `.we` file as component element

first, require a path/to/component.we in script like require('./foo.we') or write inline element like <element name="foo" src="./foo.we"></element>.
second, use it in template like <foo></foo>.

<element name="foo" src="./foo.we"></element>

<template>
  <div>
    <foo></foo>
    <bar></bar>
  </div>
</template>

<script>
  require('./bar.we')
</script>

How to specify the name of a component

By default, the name is the basename without extname of component path.
Give a name query in require request, like require('./foo.we?name="fooo"'). Or specify a name attribute in element, like <element name="fooo" src="./foo.we" ></element>
use the name in template like <fooo></fooo>.

<element name="fooo" src="./foo.we"></element>

<template>
  <div>
    <fooo></fooo>
    <barr></barr>
  </div>
</template>

<script>
  require('./bar.we?name=barr')
</script>

Test

npm run test

will run mocha testing.

And you can check the specs in test/spec folder.