element-loader
A webpack loader converts markup to react component(compatible with all react systems. eg. rax、react、react-native、preact)
Install
npm install --save-dev element-loader
Usage
Config loader in webpack.config.js
:
// webpack.config.js moduleexports = // Webpack 3+ module: rules: test: /\.html/ use: 'element-loader' options: // React & Component is required banner: `import React, { Component } from 'react';` // Webpack 2 module: loaders: test: /\.html/ loader: 'element-loader' query: // React & Component is required banner: `import React, { Component } from 'react';` ;
Write in .babelrc
:
"presets": "es2015" "react"
Input Container.html
:
{{text}} {{item}}
Input Hello.html
:
{{message}}
Input hello.css
:
Use react in index.js
:
;;; ReactDOM;
Rax
Of cource, You also can use rax with es6.
Use rax in index.js
:
;; { return <Container text="hello world" show=true items=1 2 3 />; } ;
Config webpack.config.js
:
moduleexports = module: loaders: test: /\.html/ loader: 'element-loader' query: banner: `import { createElement, Component } from 'rax';` ;
In .babelrc
:
"presets": "es2015" "rax"
Options
banner
Code inserted into each element. You can use it in any framework(eg. rax、react、react-native...) by configuring this option.
For example:
// webpack.config.jsbanner: ` import { createElement, Component } from 'rax'; import { View, Text, Link } from 'rax-components';`;
babel
option babel
readed by default, If there is no written in query, We'll get data from the .babelrc
file.
query: babel: presets: 'es2015' 'rax';
engine
template engine option you can see list.
Config in webpack.config.js
:
query: engine: 'jade';
Write in html:
div.header span hello world
Directives
- :for: repeat a array eg. "{{item in items}}"
- :if: show or hide eg. "{{x < 5}}"
TODO
- compile script
- [] support else、elif directive