Next Perpendicular Moonlanding

    weex-loader

    0.7.12 • Public • Published

    Weex Loader

    A webpack loader for Weex.

    Install

    npm install weex-loader babel-loader --save
    

    Features

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

    Upgrade to v0.3

    • Use a different way to load parted files. The old way is deprecated.
    • If you dependent weex-components under v0.1, please update it to v0.2.
    • Just enjoy the new features!
    • Use some hack way to require @weex-module/xxxx in .js file. see issue

    Usage

    How to load a .we file.

    make a webpack config

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

    How to write parted files

    specify src attribute

    <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

    1. 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>.
    2. 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

    1. By default, the name is the basename without extname of component path.
    2. 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>
    3. use the name in template like <fooo></fooo>.
    <element name="fooo" src="./foo.we"></element>
    
    <template>
      <div>
        <fooo></fooo>
        <baar></baar>
      </div>
    </template>
    
    <script>
      require('./bar.we?name=baar')
    </script>
    

    Test

    npm run test

    will run mocha testing.

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

    Specs

    Knew Issues

    Install

    npm i weex-loader

    DownloadsWeekly Downloads

    97

    Version

    0.7.12

    License

    none

    Unpacked Size

    38.6 kB

    Total Files

    18

    Last publish

    Collaborators

    • balloonzzq
    • erha19
    • fkysly
    • hanks
    • jinjiang
    • lvscar
    • songsiqi
    • terrykingcha