Riot.js + webpack + ES6(Babel, buble)에서의 개발 환경 구축 예 ※추기 webpack2
Riot.js (이하 riot)는 매우 간단하고 경량이며 문턱도 낮고 매우 쓰기 쉬운 컴포넌트 지향 UI 라이브러리입니다. (여기까지 템플릿)
지금 입니다만, 제대로
ES6 로 쓰려고 생각해, riot+webpack+ES6의 개발 환경을 만들었습니다.준비
디렉토리 구성
이 예제의 디렉토리 구성은 다음과 같습니다.
./
├ .gitignore
├ node_modules
├ package.json
├ webpack.config.js
├ index.html
├ app
│ └ app.js
│
├ tag
│ └ app.tag
│
└ build
└ bundle.js
다음은 Babel 를 사용하는 경우와 buble 를 사용하는 경우에 미묘하게 차이가 있기 때문에, 따로따로 기술합니다.
▼ Babel을 사용하는 경우
모듈 목록
설치할 모듈은 다음과 같습니다.
./
├ .gitignore
├ node_modules
├ package.json
├ webpack.config.js
├ index.html
├ app
│ └ app.js
│
├ tag
│ └ app.tag
│
└ build
└ bundle.js
설치 명령
$ npm install -D babel-core babel-preset-es2015-riot riot riot-route webpack riotjs-loader babel-loader
webpack 설정
우선 webpack
v1 의 설정 예.webpack.config.js(v1)
const webpack = require('webpack')
module.exports = [
{
// 対象のjsファイル
entry: './app/app.js',
output: {
path: __dirname + '/build/',
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader'
}
],
loaders: [
{
test: /\.js|\.tag$/,
exclude: /node_modules/,
loader : 'babel-loader',
query : {
presets: ['es2015-riot']
}
}
]
},
resolve: {
extensions: ['', '.js', '.tag']
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.ProvidePlugin({ riot: 'riot' })
]
}
]
다음으로
v2 (2.3.3) 의 설정예.webpack.config.js(v2)
const webpack = require('webpack')
module.exports = [
{
entry: './app/app.js',
output: {
path: __dirname + '/build/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tag$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'riot-tag-loader',
options: {
template: 'pug', // テンプレートを指定（任意）
debug: true
}
}
]
},
{
test: /\.js|\.tag$/,
enforce: 'post',
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: `es2015-riot`
}
}
]
}
]
},
resolve: {
extensions: ['.js', '.tag']
},
plugins: [
new webpack.ProvidePlugin({ riot: 'riot' })
]
}
]
▼ buble을 사용하는 경우
모듈 목록
설치할 모듈은 다음과 같습니다.
$ npm install -D buble riot riot-route webpack riotjs-loader buble-loader
webpack 설정
위의 webpack.config.js를 다음과 같이 변경합니다.
우선은
v1 의 설정예.webpack.config.js(v1)
const webpack = require('webpack')
module.exports = [
{
// 対象のjsファイル
entry: './app/app.js',
output: {
path: __dirname + '/build/',
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.tag$/,
exclude: /node_modules/,
loader: 'riot-tag-loader'
}
],
loaders: [
{
test: /\.js|\.tag$/,
exclude: /node_modules/,
- loader : 'babel-loader',
- query : {
- presets: ['es2015-riot']
- }
+ loader : 'buble-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.tag']
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.ProvidePlugin({ riot: 'riot' })
]
}
]
다음으로
v2 (2.3.3) 의 설정 예.webpack.config.js(v2)
const webpack = require('webpack')
module.exports = [
{
entry: './app/app.js',
output: {
path: __dirname + '/build/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tag$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'riot-tag-loader',
options: {
template: 'pug', // テンプレートを指定（任意）
debug: true
}
}
]
},
{
test: /\.js|\.tag$/,
enforce: 'post',
exclude: /node_modules/,
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: `es2015-riot`
- }
- }
- ]
+ use: ['buble-loader']
}
]
},
resolve: {
extensions: ['.js', '.tag']
},
plugins: [
new webpack.ProvidePlugin({ riot: 'riot' })
]
}
]
어쩌면 Babel은
babel-preset-es2015-riot 모듈을 설치하고 preset을 지정하지 않으면 올바르게 트랜스 파일되지 않지만 buble에서는 위의 설정으로 움직이고있는 것이 왜인지 조금 이상합니다. (※ 나는 buble 쪽이 마음에 듭니다!)이후는
Babel , buble 공통입니다.샘플 코드
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<app></app>
<script src="build/bundle.js"></script>
</body>
</html>
app/app.js
require('../app.tag');
riot.mount('app', { title: 'hogehoge' });
tag/app.tag
<app>
<h2>{ opts.title }</h2>
<button onclick="{ show_count }">click</button>
<script>
self = this
let count = 0
show_count() {
count += 1
alert(`count: ${count}`)
}
</script>
</app>
명령 설정 및 컴파일 실행
명령줄에서 컴파일을 실행할 수 있도록 package.json에 명령을 추가합니다.
package.json
"scripts": {
"build": "webpack --watch --progress"
}
다음 명령에서 컴파일 실행!
$ npm run build
브라우저에서
index.html 를 열고 click 버튼을 클릭하면 아래와 같이 경고가 표시되고 클릭할 때마다 카운트가 증가하면 성공합니다!
주의점
riotjs-loader 하지만 버전 3.0.0 그러면 컴파일 에러가 되므로, 4.0.0 로 업그레이드해 주세요.여러분 각각에게 베스트인 환경이 있다고 생각하므로, 참고까지~.
참고
Reference
이 문제에 관하여(Riot.js + webpack + ES6(Babel, buble)에서의 개발 환경 구축 예 ※추기 webpack2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/clown0082/items/ba9177eb26b09baa668b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
