Javascript

この記事は Riot.js Advent Calendar 2017 13日目の記事です。昨日は@supple さんによるRiot+ElectronでMarkdownエディタを作るでした。 tl;dr Parcel というJavaScriptのモジュールバンドラを触ってみた webpackなどと比べて設定ファイルなどもいらずとても簡単ホットリロードな開発サーバを簡単に実行できる Riotと組み合わせるのもそれほど難しくない Parcel + Riot.js Parcel というJavaScriptのモジュールバンドラが話題なのでさわってみました。国内で話題になっている元の記事は「webpack時代の終わりとparcel時代のはじまり」。 React との組み合わせで記事を書かれています。個人的にはRiot.js が好みなので、Riot.jsとの組み合わせで触ってみました。尚、webpackは挫折したため比較できません。 Parcel/Riot.jsのインストール npmを使ってインストールします。 1 $ npm install -g parcel-bundler riot source code ディレクトリ構造以下の様なディレクトリ構造だとします。なお、練習用のため、動作確認に関係ない部分は適当に削っています。 src/ |- index.html |- index.js |- package.json |- app/ | |- App.tag index.html 1 2 3 4 5 6 7 8 <!doctype html> <html lang="ja"> <head></head> <body> <App></App> <script src="index.js"></script> </body> </html> index.js 1 2 3 4 import riot from 'riot' import './app/tags' riot.mount('App') App.tag 1 2 3 4 5 6 7 <App> <h1>Hello, parcel world!</h1> <script> import riot from 'riot' </script> </App> package.json package.jsonはnpm init -yで作成しました。 ...

Riot.jsでは、標準でスタイルシートにLessを使用することができます。その際の使用方法は簡単で、スタイルタグにtypeを指定するだけです。 1 2 3 <style type="less"> ... </style> 扨、ここで、イマドキな皆さんはLessじゃなくてSass(SCSS)を使いたい！と思うかもしれません(思いますよね？) なので、Sassを使えるようにしてみましょう。基本方針基本的には、riot.parser.css.sassにSassのコンパイラ関数を作成するだけです。 riot.parser.css.sassには、引数として、タグ名 stylesheet が渡されます。この、第二引数をコンパイルして返す関数を作成すれば良いのです。ランタイムコンパイルでSass(SCSS)を使用するランタイムコンパイル時はsass.jsを使用します。 <head>タグ内で、https://cdn.rawgit.com/medialize/sass.js/v0.6.3/dist/sass.jsを読み込むなどすれば良いでしょう。その上で、タグのマウント前に以下の記述を追加します。 1 2 3 4 riot.parsers.css.sass = function(tagName, stylesheet) { var result = Sass.compile(stylesheet); return result; }; gulp-riotプリコンパイルでSass(SCSS)を使用する glup-riotでプリコンパイルする際にSassを使用するには、node-sassを使用して、gulpfile.jsに以下のように記述します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var gulp = require('gulp'); var riot = require('gulp-riot'); var sass = require('node-sass'); gulp.task('riot', function() { gulp .src('app.tag') .pipe(riot({ parsers: { css: { sass: function(tagName, stylesheet) { var result = sass.renderSync({ data: stylesheet }); return result.css.toString(); }, }, }, })) .pipe(gulp.dest('./')) ; });