riot.js webpack 에 Hello World

3039 단어 riotHTML5CSS3

배경



일로 간단한 LP 구축을 할 기회가 있었다.
잠시 프론엔드를 만지지 않았기 때문에 공부도 겸해 전전부터 신경이 쓰이고 있었다 riot

작업 로그



먼저 프로젝트 폴더 아래에 package.json 만들기
$ npm init

webpack 관련 패키지 설치
※webpack은 JS 파일을 정리하는 고기능 모듈 번들 중 하나
$ npm i webpack webpack-cli webpack-dev-server

riot 관련 패키지 설치
$ npm i riot @riotjs/hot-reload　@riotjs/webpack-loader @riotjs/compiler

빠른 시작 을 참고로 파일 준비

index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Riot app</title>
</head>
<body>

<div id="app"></div>

<script src="public/bundle.js" charset="utf-8"></script>
</body>
</html>

app.riot
<app>
    <p>{ props.message }</p>
</app>

main.js
import * as riot from 'riot'
import App from './app.riot'

const mountApp = riot.component(App)

const app = mountApp(
  document.getElementById('root'),
  { message: 'Hello World' }
)

webpack 설정 파일 준비 webpack.config.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        publicPath: '/public/',
        filename: 'bundle.js'
    },
    devtool: 'inline',
    module: {
        rules: [
            {
                test: /\.riot$/,
                exclude: /node_modules/,
                use: [{
                    loader: '@riotjs/webpack-loader',
                    options: {
                        hot: true
                    }
                }]
            }
        ]
    }
}

지금까지의 파일 구성은 이런 느낌



webpack-dev-server로 동작 확인
./node_modules/.bin/webpack-dev-server --port 8080

http://localhost-8080.com/ 방문


배포용 bundle.js 만들기
$ ./node_modules/.bin/webpack

출력한 bundle.js와 index.html을 서버에 올리면 서버에서도 움직일 것이다.

소감



인터넷에 정보가별로 구르지 않는 인상.
또한 v3에서 v4로 큰 변화가 있었던 것처럼 몇 안되는 넷 기사를 의지하여 Hellow World를 표시하는데도 상상 이상으로 시간을 걸렸다 (웃음)

이대로 riot.js로 사이트 구축할까는 요 검토.
문장 읽기 앱을 JavaScript로 작성해 보았습니다.
CSS와 Javascript로 세로 쓰기 다단계 디스플레이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage