--- title: Parcel+Riot 開発環境構築 tags: parcel riot JavaScript author: elastic slide: false --- *追記 18/2/22 * riot用のプラグインが出て、もっと簡単にできるようになったよhttps://qiita.com/jude/items/76dcce54b920537d3e1a ********** 初投稿です!お手柔らかにお願いします。 [webpack時代の終わりとparcel時代のはじまり](https://qiita.com/bitrinjani/items/b08876e0a2618745f54a) という記事があって、parcelという設定不要のバンドラーがあるらしいのでriotで試してみたいと思います。 ## 自分の環境 - Windows 10 home - node.js v8.9.1 - npm 5.5.1 ## パッケージ ``` npm init -y npm install -g parcel-bundler riot npm install --save-dev babel-preset-es2015-riot riot ``` ## コード書いていく **ディレクトリ構成** ``` -root -package.json -src -app         <<<<ここにタグファイルを入れる -app.tag -main.js -index.html ``` **コード** ```index.html Riot,Parcel ``` ```main.js import riot from 'riot' import './app/tags' //riotのコンパイラで出力されたtags.js riot.mount('app-root') ``` app.tag ```html  

{ title }

``` コマンドに`riot src/app/ src/app/tags.js`を実行すると`src/app/`内のタグファイルを全てコンパイルし、`src/app/tags.js`(コンパイル後のファイル)を出力します。 `parcel src/index.html`で依存しているhtml,css,js,babel等を見つけてバンドルしてくれます。ローカルサーバもたちます. 便利! **設定ファイル** ```package.json ・・・ "scripts": { "start": "npm run build & npm run bundle", "bundle": "parcel src/index.html", "build": "riot src/app/ src/tags.js" }, ・・・ ``` ## 実行 `npm start`を実行して、http://localhost:1234/ にアクセス。 Hello,Worldと表示されれば成功です. ## まとめ riotコマンドでtagファイルをjsファイルにコンパイルし、parcelでバンドルするだけで、特別なことはしてないです。