Riot.js2.2 정보 요약

Riot.js2.2 정보 요약
어쨌든 먼저 주의한 것을 적어라.언제든지 업데이트할 수 있습니다.

일가

공식 문서(영어)

공식 문서(일본어)

GiitHub 웨어하우스

From React to Riot 2.0 - 배경 설명 블로그 기사

Gitter

공식 포럼

샘플 세트(준비 중)

개발 정보

설치하다.

riot 모든 공구는 창고를 포함하지 않습니다.

브라우저용 라이브러리

컴파일러

CLI 툴

이 세 개는 같은 거야.각자 스타일대로 설치해 주세요.(추기/다음 v2.3을 위해 서브모듈화 중)

라이브러리

최신 버전.기타 모델은 여기.입니다.

컴파일러 없음: https://cdn.jsdelivr.net/riot/2.2/riot.min.js

컴파일러: https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)

npm 경유.Browserify 사용 시 등

$ npm install --save riot

bower 경유.

$ bower install --save riot

CLI 도구로 사용

명령줄에서 riot을 사용하는 경우 전역에 설치됩니다.

$ npm install riot -g

사용 방법은 다음과 같다.

# 同一フォルダ内にコンパイル
$ riot some.tag

# 他のフォルダにコンパイル
$ riot some.tag some_folder

# 他のフォルダにファイル名を指定してコンパイル
$ riot some.tag some_folder/some.js

# 特定フォルダ内のファイルをすべてコンパイル (個別に)
$ riot some/folder path/to/dist

# 特定フォルダ内のファイルをコンパイルしてひとつに結合
$ riot some/folder all-my-tags.js

편역하다

구성 도구를 통해

gulp-riot-glop 플러그인

grunt-riot - Grunt 플러그인

riotjs-loader - WebPack용 모듈 로더

API에서

var riot = require('riot');

var js = riot.compile(source_string);

Browserify 시나리오

Browserify 변형이 있어서 이걸로 할게요.

riotify

이런 느낌의 JavaScript 파일이 있어도...

// src/app.js
var riot = require('riot');
require('./components/custom-form.tag');
require('./components/custom-list.tag');

riot.mount('custom-form', { opt1: 'aaa', opt2: 'bbb' });
riot.mount('custom-list', { opt1: 'ccc', opt2: 'ddd' });

Browserify Gulp 경유 시gulpfile↓

// 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(riotify, { template: 'jade' }) // pass options if you need
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest('dist/'))
});