Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

weex-loader

Package Overview
Dependencies
Maintainers
8
Versions
60
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

weex-loader

a webpack loader for weex

  • 0.7.12
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
8
Created
Source

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

Keywords

FAQs

Package last updated on 26 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc