项目地址：
http://riotjs.com/
备注：
为了简单使用了 browserify 进行构建
1. 项目结构
├── app.css

├── gulpfile.js

├── index.html

├── package.json

├── README.md

├── sample.tag

├── src

│   └── app.js

└── yarn.lock
2. 代码
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 start
4. 参考资料
https://www.npmjs.com/package/browserify-css

https://github.com/riot/riot

https://www.npmjs.com/package/riotify

https://github.com/rongfengliang/riotjslearning.git
 
 
 
 

riotjs 简单使用&&browserify 构建的更多相关文章

  1. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  2. gulp：更简单的自动化构建工具

    目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里 ...

  3. 简单使用Laravel-admin构建一个功能强大的后台管理

    Laravel-admin可以快速构建一个功能强大的后台,方便快速开发. 以下内容记录简单使用Laravel-admin,以及遇到小错误的解决方法. Laravel-admin 依赖以下环境 需要提前 ...

  4. Ant简单工程的构建

    1.在Ant的官方网站http://ant.apache.org/bindownload.cgi下载Ant最新版本(我下载的是apache-ant-1.8.2-bin.zip),Ant无需安装,直接解 ...

  5. EasyAR SDK在unity中的简单配置及构建一个简单场景。

    首先打开EasyAR的官方网站http://www.easyar.cn/index.html,注册登陆之后,打开首页的开发页面. 下载sdk和Unity Samples. 创建一个unity3d工程N ...

  6. 基础项目构建，引入web模块，完成一个简单的RESTful API 转载来自翟永超

    简介 在您第一次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复粘贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot ...

  7. java构建简单的HTTP服务器

    使用Java技术构建Web应用时, 我们通常离不开tomcat和jetty之类的servlet容器,这些Web服务器功能强大,性能强劲,深受欢迎,是运行大型Web应用的必备神器. 虽然Java的设计初 ...

  8. Jenkins简单入门：下载-安装-配置-构建

    Jenkins简单配置流程 官网下载地址:https://jenkins.io/index.html 1.下载安装Jenkins (1)点击Download Jenkins进入下载页 (2)根据自己运 ...

  9. browserify使用手册

    简介 这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用 ...

随机推荐

  1. HDU 4283 You Are the One ★(进出栈的括号匹配性质：区间DP)

    题意 有一个队列,每个人有一个愤怒值D,如果他是第K个上场,不开心指数就为(K-1)*D.但是边上有一个小黑屋(一个FILO堆栈),可以一定程度上调整上场程序,求一种安排上场方案使得所有人的不开心指数 ...

  2. VMware虚拟机创建安装之后不出现VMnet1和VMnet8虚拟网卡

    大家可能遇到过安装虚拟机之后,不出现这两张虚拟网卡,造成一系列的网络问题 VMware虚拟机无法将网络改为桥接状态 本人亲试可行的解决办法 首先把你之前安装的VMware虚拟机卸载,清理得一干二净: ...

  3. FlashFXP 4.3.1 注册码

    FlashFXP 4.3.1 注册码 --------start--------- FLASHFXPwQAOlhkgwQAAAAC6W5MNJwTnsl73nIraAU149tnCQS0hmZU3GG ...

  4. angularJS---初识指令

    angularJS 什么是angularJS AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款 ...

  5. Java开发微信公众号模板消息【同步|异步】

    第一步:申请模板消息功能并添加模板 在微信公众平台找到你需要的模板,并添加上即可: 第二步:添加功能模块后开始开发 功能中使用的类及代码: 发送数据主实体类: Template.java packag ...

  6. 【hive】在alter修改元数据的时候报错 mismatched input 'xxxxx' expecting KW_EXCHANGE

    目的:修改表某个字段属性 语句: 报错信息 错误原因: 在HiveQL中,alter命令不使用与create或select相同的语义 ; 具体来说,您不能使用“ALTER DATABASE.TABLE ...

  7. SqlServer和MySQL中存储过程out返回值处理C#代码

    1.SqlServer中out处理 C#代码 #region"SqlServer中存储过程处理out返回值" //public void getdata() //{ // stri ...

  8. HDU 1198 Farm Irrigation（并查集+位运算）

    Farm Irrigation Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Tot ...

  9. ios 第3天

    在手动引用计数中  每一次调用 retain  retainCount 就会加一  每一次release  retainCount就会减一 当retainCount 为零时  就会free (p) ; ...

  10. New Concept English there （2）Typing speed exercise

    typing speed (11words/ seconds) our vicar ia always rising money for one cause or another, but he ha ...