riotjs 简单使用&&browserify 构建
项目地址：
http://riotjs.com/备注：
为了简单使用了 browserify 进行构建
1. 项目结构
├── app.css
├── gulpfile.js
├── index.html
├── package.json
├── README.md
├── sample.tag
├── src
│ └── app.js
└── yarn.lock2. 代码
a. app.css
.demo {
font-size: 100px;
}
b. gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var riotify = require('riotify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function(){
browserify({ entries: ['src/app.js'] })
.transform(require('browserify-css'),{global: true,autoInject:true})
.transform(riotify) // pass options if you need
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('dist/'))
});
c. index.html
<html>
<head>
<title>Hello Riot.</title>
</head>
<body>
<!-- place the custom tag anywhere inside the body -->
<example-tag></example-tag>
<todo></todo>
<!-- include the tag -->
<!-- <script type="riot/tag" src="sample.tag"></script> -->
<!-- include riot.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/riot@3.7/riot+compiler.min.js"></script> -->
<!-- mount the tag -->
<!-- <script>riot.mount('example-tag')</script> -->
<script src="dist/app.js"></script>
</body>
</html>
备注：注释的部分可以直接使用js 引用运行应用
d. package.json
{
"name": "riotjsdemo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"riot": "^3.8.1"
},
"scripts": {
"start": "gulp browserify && live-server",
"build": "gulp browserify"
},
"devDependencies": {
"browserify": "^14.5.0",
"browserify-css": "^0.14.0",
"gulp": "^3.9.1",
"live-server": "^1.2.0",
"riotify": "^2.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
e. sample.tag
<example-tag>
<p class="demo" id="findMe">Do I even Exist?</p>
<todo></todo>
<script>
var options = require("./app.css");
var test1 = document.getElementById('findMe')
console.log('test1', test1) // Fails
this.on('update', function(){
var test2 = document.getElementById('findMe')
console.log('test2', test2) // Succeeds, fires on every update
})
clickdemo=function(e){
console.log(e);
}
this.on('mount', function(){
var test3 = document.getElementById('findMe')
console.log(options);
console.log('test3', test3) // Succeeds, fires once (per mount)
})
</script>
</example-tag>
<todo>
<!-- layout -->
<h3>{ opts.title }</h3>
<ul>
<li each={ item, i in items }>{ item }</li>
</ul>
<form onsubmit={ add }>
<input ref="input">
<button>Add #{ items.length + 1 }</button>
</form>
<!-- style -->
<style>
h3 {
font-size: 14px;
}
</style>
<!-- logic -->
<script>
this.items = []
add(e) {
e.preventDefault()
var input = this.refs.input
if(input.value!=""){
this.items.push(input.value)
input.value = ''
}
console.log(input.value);
}
</script>
</todo>
f. src/app.js
var riot = require('riot')
var sample = require('../sample.tag')
riot.mount(sample)3. 运行
a. 构建
yarn run build
b. 构建并运行
yarn run start4. 参考资料
https://www.npmjs.com/package/browserify-css
https://github.com/riot/riot
https://www.npmjs.com/package/riotify
https://github.com/rongfengliang/riotjslearning.git
