TypeScript+webpack+Vue.js

https://ics.media/entry/16329#webpack-ts-vue

このサイトに従って環境を作ったのですが、うまく動きません(T___T)

コンソールに、"vue.js:584 [Vue warn]: Cannot find element: #app"と出てしまいます。
あと、watchがうまく動きません。これがちゃんと動けば保存した時に自動的にビルドされるんですかね(>___<)

追記1
codeshareをうまく保存できてなかったので保存し直しました

追記2
回答ありがとうございました。
治りました！
追加で質問したいです(>___<)
今の状態だと
main.tsをbundle.jsとしてビルドするようになってるのですが、これを
A(任意の名前).tsをA.jsとしてビルドできるようにしませんか。
名前の違うタイプスクリプトファイルを同じフォルダーにどんどん作っていきたいのですが、ビルドはもうこのシステムに一任したくて

追記3
output: {
// 出力ファイルのディレクトリ名
path: ${__dirname}/build,
// 出力ファイル名
filename: '[name].bundle.js'
},
という具合に

outputでエントリーの名前を引き継げるようにはなりました。
でも複数entryを書く方法も試してみたのですが、うまくいかず
しかもできればentryにいちいちtsのファイル名を書きたくないです…
そしてwatchがやっぱりうまく動かないです(T_____T)

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>Hello</title>
6    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
7    <script src="../build/bundle.js"></script>
8</head>
9
10<body>
11    <div id="app">
12        <div v-bind:class="{ active: isActive, 'text-danger': hasError }">
13            クラス名変更
14        </div>
15
16        <input type="button" value="button" v-on:click="doAction();">
17    </div>
18</body>
19
20</html>

typescript
1import Vue from 'vue';
2import Component from 'vue-class-component';
3
4let app: Vue = new Vue({
5    el: "#app",
6    data: {
7        isActive: true,
8        hasError: false
9    },
10    methods: {
11        doAction: function () {
12            this.isActive = !this.isActive
13            this.hasError = !this.hasError
14        }
15    }
16});
17

json
1//tsconfig.json
2{
3    "compilerOptions": {
4        "sourceMap": true,
5        // TSはECMAScript 5に変換
6        "target": "es5",
7        // TSのモジュールはES Modulesとして出力
8        "module": "es2015",
9        // import Vue from 'vue' の書き方を許容する
10        "allowSyntheticDefaultImports": true,
11        "lib": [
12            "dom",
13            "es2017"
14        ],
15        "moduleResolution": "node",
16        // デコレーターを有効に設定
17        "experimentalDecorators": true
18    }
19}

json
1//package.json
2{
3    "name": "today",
4    "version": "1.0.0",
5    "description": "",
6    "main": "index.js",
7    "scripts": {
8        "test": "echo \"Error: no test specified\" && exit 1",
9        "build": "webpack",
10        "watch": "webpack -w"
11
12    },
13    "author": "",
14    "license": "ISC",
15    "devDependencies": {
16        "awesome-typescript-loader": "^3.4.1",
17        "source-map-loader": "^0.2.3",
18        "typescript": "^2.6.2",
19        "webpack": "^3.10.0"
20    },
21    "dependencies": {
22        "vue": "^2.5.13",
23        "vue-class-component": "^6.1.2"
24    }
25}

javascript
1//webpackconfig.js
2module.exports = {
3    // メインとなるJavaScriptファイル（エントリーポイント）
4    entry: './src/main.ts',
5    // ファイルの出力設定
6    output: {
7        //  出力ファイルのディレクトリ名
8        path: `${__dirname}/build`,
9        // 出力ファイル名
10        filename: 'bundle.js'
11    },
12    module: {
13        rules: [{
14                // 拡張子 .ts の場合
15                test: /.ts$/,
16                // TypeScript をコンパイルする
17                use: 'awesome-typescript-loader'
18            },
19            // ソースマップファイルの処理
20            {
21                enforce: 'pre',
22                test: /.js$/,
23                loader: 'source-map-loader'
24            }
25        ]
26    },
27    // import 文で .ts ファイルを解決するため
28    resolve: {
29        extensions: [
30            '.ts'
31        ],
32        // Webpackで利用するときの設定
33        alias: {
34            vue: 'vue/dist/vue.js'
35        }
36    },
37    // ソースマップを有効に
38    devtool: 'source-map'
39};

javascript
1ビルドされたbundle.js
2https://codeshare.io/2p8RD0

行動規範の内容に同意します

回答2件

watchはできました

投稿2018/01/05 08:39

退会済みユーザー

総合スコア0

ベストアンサー

bundle.jsを見ていないのでなんとも言えませんが、DOMのloadより先にjsが発火していいかどうか調べて見てください。試しに

html
1
2<body>
3    <div id="app">
4        <div v-bind:class="{ active: isActive, 'text-danger': hasError }">
5            クラス名変更
6        </div>
7
8        <input type="button" value="button" v-on:click="doAction();">
9    </div>
10    <script src="../build/bundle.js"></script>
11</body>

というようにscriptタグをbodyタグ内の最下位で呼び出してください。
それでも動かなければ、別に原因があります。
それで動いたら、

typescript
1window.onload = function(){
2  let app: Vue = new Vue({
3    el: "#app",
4    data: {
5        isActive: true,
6        hasError: false
7    },
8    methods: {
9        doAction: function () {
10            this.isActive = !this.isActive
11            this.hasError = !this.hasError
12        }
13    }
14});
15}

で実装してみてください。型エラーなどがでたら
このリンク
なども参考にしてみてください。

投稿2018/01/05 07:03

退会済みユーザー

総合スコア0

退会済みユーザー

2018/01/05 07:06

下で呼んでできました！！！基本bodyタグの最後で呼ぶんですよね、完全に忘れてました。本当に良かったですありがとうございます(T___T) 今更ですがbundle.jsはこれです https://codeshare.io/2p8RD0

退会済みユーザー

2018/01/05 07:12 編集

あとすみません、今の状態だと main.tsをbundle.jsとしてビルドするようになってるのですが、これを A(任意の名前).tsをA.jsとしてビルドできるようにしませんか。名前の違うタイプスクリプトファイルを同じフォルダーに量産したくて… ビルドはもうこのシステムに一任してしまいたくて、また環境を別に作りたくなくて

退会済みユーザー

2018/01/05 09:11 編集

> 基本bodyタグの最後で呼ぶんですよねこちらは、bodyタグの最後で呼ばなくても window.onloadに実行したい関数をセットすれば htmlが読み終わった後に実行できますよ。 ``` output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/build`, // 出力ファイル名 filename: 'bundle.js' }, のfilename: 'bundle.js'をfilename: 'A.js' ``` にすればできます。また、filename: '[name].js'に設定して、 ``` entry:{ "A": "entry_file1.js", "B": "entry_file2.js" } ``` とやるとbuild指定のdirectoryにA.js,B.jsが作れます。またkeyは相対パスでもできます。ただ、シングルページアプリケーションを作成する場合は、entryの起点となるファイルに全てのファイルをimportさせるため、特別な理由がない限りbuildするjsを複数作成する必要はなくなります。複数設定するときは、backendで違う言語のテンプレートエンジンを使用して使う場合やパフォーマンス的な問題を考えた場合などです。

行動規範の内容に同意します

あなたの回答