Parcel + Riot 고속으로 환경 구축
이번에는 공식적인 것이 아니지만 parcel 용 riot 플러그인
parcel-plugin-riotjs를 사용합니다.설치
npm init -ynpm install --save riot parcel-bundler parcel-plugin-riotjs디렉토리 구성
--index.html
--main.js
--app.tag
--package.json
코드
우선 index.html.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel-Riot</title>
</head>
<body>
<app></app>
<script src="main.js"></script>
</body>
</html>
그런 다음 항목 파일을 만듭니다.
main.js
import riot from 'riot'
import './app.tag' //ここでタグファイルを読み込む
riot.mount('app')
그리고 태그 파일
app.tag
<app>
<h1>{ title }</h1>
this.title = 'Hello'
</app>
실행
package.json에 이것 추가
"scripts": {
"start": "parcel index.html"
},
npm start 에서 실행.그리고 여기에 액세스 http://localhost:1234/
정말로 설정 파일이라든지 쓰지 않고 할 수 있었습니다.
발전
예를 들어 riot에서 pug로 쓰고 싶을 때나 buble·babel의 세세한 설정을 하고 싶을 때는
.riotrc.js 라는 파일을 작성합니다.글쎄, 내용은 공식 riot.config.js와 동일하기 때문에 쓰는 방법은 공식적으로 맡긴다 ->>> htp // 리오 tjs. 코 m / 자 / 구이 데 / 코 m ぇ r /
예를 들어 pug를 설정해 봅시다.
우선 설치
npm i -S pug.riotrc.js
const pug = require('pug')
module.exports = {
template: 'pug',
parsers: {
html: {
pug: html => pug.compile(html)
}
}
}
작성하면 설정 완료입니다! 이제 태그 파일 안을 pug로 걸게 됩니다.
실행은 항상 그렇습니다
npm start마지막으로
설정 파일 쓰지 않아도 좋은 것은 매우 편하네요.
Reference
이 문제에 관하여(Parcel + Riot 고속으로 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/elastic/items/76dcce54b920537d3e1a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
