Help us understand the problem. What is going on with this article?

Riot.js の開発環境構築に新たな革命が!

開発環境構築に自動化の流れが

感動しました深夜2時です。もうとにかく、このツイートに書いてあるコマンドをたたいてみてくれ!で終わりっちゃ終わりなんですが、感動したので書きますw

今まで Riot.js(以下 riot)で開発するに当たって、開発環境をどうやって用意するかはずっと大きな課題の一つでした。ちなみに私の場合は 公式のサンプル集 から parcelwebpack, typescript ディレクトリのものをコピーし、$ git init して使っていました。

実際に実行

ではやってみましょう。

# 適当なディレクトリを作成して移動
$ mkdir riot-demo && cd riot-demo

# 環境構築
$ npm init riot

(ここでいつもの npm init の手順)

package name: (riot-demo)
version: (1.0.0)
description:
git repository:
license: (ISC) MIT
About to write to /path/to/dir/riot-demo/package.json:

{
  "name": "riot-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "kkeeth <zensin0082@gmail.com>",
  "license": "MIT",
  "description": ""
}


Is this OK? (yes) y

ここまではいつも通りで、ここからが本題です💁

# template を選択
# 今回は SPA にする
? Please select a template …
  Webpack Project Template
  Parcel Project Template
  Rollup Project Template
  Simple Component
❯ SPA (Webpack) Project Template
  Custom Template (You will need to provide a template path to your template zip file)

✔ Please select a template · webpack-spa
✔ Downloading the template files
✔ Unzipping the file downloaded
✔ Deleting the zip file
✔ Copying the template files into your project
✔ Deleting the temporary folder
✔ Template successfully created!

はい、これで準備は整いました。まだ完成していませんが、ここで riot-demo ディレクトリ内を見ると以下のように template がダウンロードされています。

./
├── index.html
├── webpack.config.js
├── package.json
├── package-lock.json
├── readme.md
├── LICENSE
├── src/
│   ├── app.riot
│   ├── index.js
│   ├── pages.js
│   ├── register-global-components.js
│   ├── components/
│   └── pages/
└── test/
    └── register-riot-extension.js

嬉しいことに、しっかりとテストも用意してくれており、各コンポーネントの .spec.js ファイルもありました。これは地味に助かります。

ちなみにこれらの template はどっから来たのかな?と思っていましたが、公式の organization を見たら、それぞれの template リポジトリがいつの間にか生えてましたw

スクリーンショット 2020-06-24 9.43.43.png

カレントディレクトリをよく見ると、package-lock.json 先輩がいらっしゃるじゃないですか!ということで、もし yarnの方がお好きな方はここで package-lock.json 先輩を削除してくださいw

※2020年6月25日 現在
本記事執筆時点では、template をダウンロードした時点での package.json が1行に圧縮されてしまっています。今後修正される可能性はありますが、今は json のフォーマッターサービス などで整形されることをおすすめします。

  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "nyc --require esm --require jsdom-global/register --require ./test/register-riot-extension.js mocha src/**/*.spec.js",
+   "cov": "nyc report --reporter=text-lcov | coveralls",
+   "cov-html": "nyc report --reporter=html",
+   "build": "webpack -c --mode production",
+   "prepublishOnly": "npm test",
+   "start": "webpack-dev-server --inline --watch --hot --colors -d --port 3000"
  },

ここまでできましたら、npm packages をインストールし、アプリを起動してみましょう。package.json を見ますと起動のコマンドは start ですね。

# npm を利用する方
$ npm i
$ npm run start

# yarn を利用する方
$ yarn
$ yarn start

上記コマンドを叩くと、自動的にブラウザが開き http://localhost:3000 にアクセスされると思います。

スクリーンショット 2020-06-24 10.06.21.png

最後に、このままですとソースコードが Git で管理されていませんので、$ git init もしちゃいましょう。.gitignore の中身の精査もお忘れなく〜。余談ですが、私は .gitignore を別途用意する場合は gibo というツールを利用しています。参考までに。

というわけで、以上で環境が作られました!ぶっちゃけやってみた感じでは、テンプレートを自分でダウンロードするのとあんま変わんないんじゃ…とか思いましたが、コマンドラインから離れなくてもよいのはなんだかんだ嬉しいので、create-riot を作っていただいのはありがたいですね😁

今後 riot で開発をしてみたい方はこちらを利用することをおすすめします!

ではでは(=゚ω゚)ノ

ちょっとだけ宣伝

riot 本が出ました。

riot-book.jpg
https://www.amazon.co.jp/dp/B08BHMLZCJ/

あまり書きすぎるとバンされたり批判されるので宣伝は以上です。

clown0082
A Servant Leader of front-end team/an Executive/CEO(secondary) at Yumemi, Inc. We are the lions. CLI creator by nodejs, Riot.js(Collaborator), Challenge of an ordinary engineer.
http://kito0039.hatenablog.com
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away