3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

開発環境(Riot + Stylus + Pug)を作ってみた

Last updated at Posted at 2018-08-07

Riotを勉強するにあたり、
毎度まいど、開発環境を作るのが面倒臭いので、git cloneでサクッと開発環境を構築できるようにしたものを、githubに作った記録

以下は、環境構築の具体的な作業
どうやって、環境を作ったかの備忘録として

環境構築メモ

下準備

yarn init -y
mkdir assets
mkdir assets/js
mkdir assets/js/tags
mkdir assets/html
mkdir public
mkdir public/js

Riot

yarn add -D riot pug stylus
vi assets/html/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Riot + Pug + Stylus</title>
  </head>
  <body>
    <h1>Index</h1>
    <app></app>
  </body>
</html>
vi assets/js/app.js
import riot from "riot"
import app from "./tags/app.tag"
riot.mount("*")
vi assets/js/tags/app.js
app-header
  h1 header
  style(type="stylus").
    h1
      background red
      color white
app-content
  p Hello {opts.title}
  button(onclick="{hello}") Click me
  script.
    hello() {
      const msg = `Hello ${opts.title}`
      alert(msg)
    }
app-footer
  small footer
  style(type="stylus").
    small
      display block
      text-align center
app
  app-header
  app-content(title="{opts.title}")
  app-footer

Babel

yarn add -D babel-core babel-loader babel-preset-env babel-preset-es2015-riot
vi .babelrc
{
  "presets": [ "es2015-riot" ]
}

Webpack

yarn add -D webpack webpack-cli html-webpack-plugin riot-tag-loader
yarn add -D webpack-dev-server
vi webpack.config.js
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

const ast = path.resolve(__dirname, 'assets')
const pub = path.resolve(__dirname, 'public')

export default {
  mode: 'development',
  entry: `${ast}/js/app.js`,

  output: {
    path: pub,
    filename: 'js/bundle.js'
  },

  module: {
    rules: [
      {
         test: /\.tag$/,
         enforce: 'pre',
         exclude: /node_modules/,
        use: [
          {
            loader: 'riot-tag-loader',
            options: {
              template: 'pug',
              debug: true
            }
          }
        ]
      },
      {
        test: /\.js(x)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.tag']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: `${ast}/html/index.html`,
      filename: 'index.html'
    })
  ]
}

確認

yarn webpack

下記のファイルが生成されてれば成功

  • public/index.html
  • public/js/bundle.js
yarn webpack-dev-server

Webサーバが立ち上がり「localhost:8080」で閲覧できれば成功

package.jsonにエイリアスを作っておけば、
開発に選んだツール(react,vue,riot,sass,stylus,postcss,gulp,webpack)に関係なく、統一のインターフェイスで開発できるので便利

vi package.json
  "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server"
  }
yarn build
yarn server
3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?