riotjs 简单使用&&browserify 构建
http://riotjs.com/├── app.css
├── gulpfile.js
├── index.html
├── package.json
├── README.md
├── sample.tag
├── src
│ └── app.js
└── yarn.locka. 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)a. 构建
yarn run build
b. 构建并运行
yarn run starthttps://www.npmjs.com/package/browserify-css
https://github.com/riot/riot
https://www.npmjs.com/package/riotify
https://github.com/rongfengliang/riotjslearning.gitriotjs 简单使用&&browserify 构建的更多相关文章
- 基于Gulp + Browserify构建es6环境下的自动化前端项目
随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...
- gulp：更简单的自动化构建工具
目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里 ...
- 简单使用Laravel-admin构建一个功能强大的后台管理
Laravel-admin可以快速构建一个功能强大的后台,方便快速开发. 以下内容记录简单使用Laravel-admin,以及遇到小错误的解决方法. Laravel-admin 依赖以下环境 需要提前 ...
- Ant简单工程的构建
1.在Ant的官方网站http://ant.apache.org/bindownload.cgi下载Ant最新版本(我下载的是apache-ant-1.8.2-bin.zip),Ant无需安装,直接解 ...
- EasyAR SDK在unity中的简单配置及构建一个简单场景。
首先打开EasyAR的官方网站http://www.easyar.cn/index.html,注册登陆之后,打开首页的开发页面. 下载sdk和Unity Samples. 创建一个unity3d工程N ...
- 基础项目构建，引入web模块，完成一个简单的RESTful API 转载来自翟永超
简介 在您第一次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复粘贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot ...
- java构建简单的HTTP服务器
使用Java技术构建Web应用时, 我们通常离不开tomcat和jetty之类的servlet容器,这些Web服务器功能强大,性能强劲,深受欢迎,是运行大型Web应用的必备神器. 虽然Java的设计初 ...
- Jenkins简单入门：下载-安装-配置-构建
Jenkins简单配置流程 官网下载地址:https://jenkins.io/index.html 1.下载安装Jenkins (1)点击Download Jenkins进入下载页 (2)根据自己运 ...
- browserify使用手册
简介 这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用 ...
随机推荐
- 1-16-1 LVM管理和ssm存储管理器使用&磁盘配额
大纲: 1-1- LVM逻辑卷的管理 1-2- SSM管理工具的使用 1-3- 磁盘配额技巧 ====================================== 问题描述: 当我们需要在一个 ...
- ExpandoObject使用
//public class Users { // public int Id { set; get; } // public string UName { set; get; } // public ...
- 企业号验证后携带URL参数跳转问题
http://report.dyxx.com/authorize/weixinlogin.aspx?url=http://user.dyxx.com/Xshow/lsWX.aspx?code=0000 ...
- vue.js 源代码学习笔记 ----- instance proxy
/* not type checking this file because flow doesn't play well with Proxy */ import config from 'core ...
- This is very likely to create a memory leak. Stack trace of thread
1.错误描述 警告: The web application [cmp] appears to have started a thread named [Abandoned connection cl ...
- 简单说说什么是Restful
在确定要把自己的服务创建成RESTFUL之前,要明白什么样的服务什么是RESTFUL service(https://en.wikipedia.org/wiki/Representational_st ...
- Linux sed命令操作 删除文件每一行的前k个字符、在文本的行尾或行首添加字符
删除文件每一行的前k个字符 $ cat tmp.txt # 删除每行第一个字符 $ sed 's/.//' tmp.txt # 删除每行前两个字符 $ sed 's/..//' tmp.txt # 删 ...
- sql server 插入用户
'创建登陆用户 use master create login [mashenghao] with password='kline',DEFAULT_DATABASE=[kchnetdb], DEFA ...
- 【剑指offer】翻转单词顺序，C++实现
原创博文,转载请注明出处! 本题牛客网地址 本题代码的github地址 本系列文章的索引地址 # 题目 # 思路 两次翻转,第一次翻转整个句子,第二次翻转每个单词(单词之间用逗号隔开) # ...
- IAuthenticationManager.SignOut 退不了
AuthenticationManager.SignOut(); 这个退不了,然后就加上 AuthenticationManager.SignOut( DefaultAuthenticatio ...