old/vue.js/setup browserfy
提供: 個人的記録
目次
セットアップ
前提
node.jsの環境がインストール済みであること。
参考url
vue.js のセットアップ
- 適当にプロジェクト用のディレクトリを作成して移動する。
- 下記のコマンドでプロジェクトを初期化する。
npm init
- なにかいろいろ聞かれるけど、とりあえず全部entrtでデフォルトのまま使う。
- 下記のコマンドでvueをインストールする。
npm install --save vue
- テストのために以下の内容のhtmlファイルを作成し、ブラウザで参照する。「TEST」と出れば正常にvueがinstallされている。
<html>
</head>
<title>TEST</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'TEST'
}
})
</script>
</html>
browserifyのインストール
このままではブラウザで表示するたびにvue.jsのコンパイルが走ってよろしくない。
事前コンパイルを行うbrowserifyをインストールする。
- 以下のコマンドを実行し、browserifyをインストールする。
npm install --save-dev browserify
- 以下のコマンドでbrowserifyのインストールパスを確認する。おそらく
node_modules\.binになっているはず。
npm bin
- index.htmlを以下のように記述する。
<html>
<head>
<title>TEST</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
</html>
- main.jsに以下のように記述する。(最初に記述したindex.htmlからjavascript部分の切り出し)
var Vue = require('vue')
new Vue({
el: '#app',
data: {
message: 'TEST'
}
});
- 以下のコマンドを実行し、main.jsをコンパイルする。
node_modules\.bin\browserify main.js -o bundle.js
- index.htmlをブラウザで表示し、「TEST」と表示されればコンパイルは正常にできている。
gulpのインストール
node.jsではmakeに相当するものとして、gulpがある。
ソースファイルは機能単位に分割したいので、ファイルが増加したときにそなえてgulpをセットアップする。
- 以下のコマンドでgulpをインストールする。
npm install gulp npm install vinyl-source-stream
- gulpでは vinly という形式のデータを対象に操作を行うらしい。browserify の出力結果はvinlyではないためそのままではgulpでは扱うことができないため、streamからvinlyに変換するために、vinly-source-streamが必要になるようだ。
- makefileに相当するのが、gulpfile.jsである。さきほどの、main.jsをコンパイルするgulifile.jsとして以下のように記述する。
//以下、コマンドの定義
var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
//タスクの定義。buildという名前でタスクを定義する。
gulp.task('build', function() {
browserify({
'entries': ['./main.js'] // browserifyに渡すソースファイルを配列で定義
})
.bundle() //ファイルを1ファイルにまとめる。
.pipe(source('bundle.js')) // まとめた結果にbundle.js という名前を指定する。
.pipe(gulp.dest('./')); // ./にまとめた結果を出力する。
});
//デフォルトタスクの指定
gulp.task('default', ['build']);
- 以下のコマンドででgulpを実行し、コンパイルできるかの確認を行う。
node_modules\.bin\gulp build
- node.jsのコンソールでは package.json にスクリプトの記述ができる。gulpの実行を楽にするため、以下のようにbuildスクリプトを追記する。
"scripts": {
"build": "gulp build"
}
- json形式での定義の中に、scriptsという定義(なければ追加)があるので、そこに"build"という名前で定義している。
- buildという名前で定義したスクリプトは以下の形式で実行する。
npm run build
vueifyのインストール
vueの単一ファイルコンポーネントを使えるとコンポーネント物をコンポーネントで管理できるようになる。単一ファイルコンポーネントのコンパイルも取り扱うためにvueifyを導入する。
- 以下のコマンドでvueifyをインストールする。
npm install vueify
- gulpからvueifyを使用できるように、packegejson.jsに以下のエントリを追加する。
"browserify": {
"transform": [
"vueify"
]
}
- さっきまで使ってたサンプルからテキスト部分を切り離し、text.vueという名前で以下のファイルを作成する。
<template>
<p>{{message}}</p>
</template>
<script>
Vue.component ('text', {
props: {
data: "TEST"
}
}
);
</script>
