Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2020.05.26

webpack&TypeScriptのプロジェクトでVue.jsを使える開発環境を構築してみる

Tags: ,,,,

過去記事などで、webpackとTypeScriptを使った開発環境の構築方法についていくつかまとめていますが、今回はwebpackとTypeScriptのプロジェクト内でVue.jsのライブラリを使えるようにしていきたいと思います。Vue.jsはJavaScriptのフレームワークで、SPAなどのウェブアプリケーションを開発する際によく使われています。Vue.jsを使うことで動的なウェブページが簡単に作成することができます。

 

今回はVue.jsのライブラリのソースコードをnpmでインストールしていきます。まずは、下記コマンドでVue.js本体のパッケージを追加します。

$ npm install --save vue
+ vue@2.6.11

 

また、関連するパッケージも下記のようにインストールしていきます。ここは必要に応じてパッケージを選択していきます。

$ npm install --save-dev vue-class-component vue-loader vue-template-compiler
+ vue-class-component@7.2.3
+ vue-loader@15.9.2
+ vue-template-compiler@2.6.11

 

インストールが完了すると、package.jsonにパッケージが追記されているのが確認できますね。

【package.json】

{
 "dependencies": {
  "vue": "^2.6.11",
  ...........
 },
 "devDependencies": {
  "vue-class-component": "^7.2.3",
  "vue-loader": "^15.9.2",
  "vue-template-compiler": "^2.6.11",
  ...........
 },
 "browser": {
  "vue": "vue/dist/vue.common.js"
 },
 ...........
}

 

TypeScriptを使わず、通常のJavaScriptでBrowserifyを利用する時には、上記のように「browser」の項目にVue.jsでビルドファイルを指摘しておきます。でないと、下記のようにコンソール上でエラーが表示されてしまいます。

Vue warn: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

 

エラーの内容としては、ランタイム限定のファイルが読み込まれてしまっているようで、デフォルトの設定とのことです。ですので上記のようにpackage.jsonに指定する必要があります。

 

次にTypeScriptの設定を行います。下記のように設定していきますが、重要となるのは「allowSyntheticDefaultImports」「lib」「experimentalDecorators」の指定となります。

【tsconfig.json】

{
 "include": [
  "src/ts/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "es2015", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "lib": [
   "dom",
   "es2020"
  ],
  "experimentalDecorators": true
 }
}

 

続けて、webpackの設定を行っていきます。ここでは、「.vue」ファイルが読み込まれるように「vue-loader」の指定と、エイリアスの設定としてVue.jsのビルドファイルの指定を忘れないようにしておきます。

【webpack.config.js】

module.exports = {
 mode: 'development',
 entry: './src/ts/index.ts',
 output: {
  path: `${__dirname}/dist/assets/js`,
  filename: 'main.min.js'
 },
 module: {
  rules: [
   {
    test: /\.ts$/,
    use: 'ts-loader'
   },
   {
    test: /\.vue$/,
    use: 'vue-loader'
   }
  ]
 },
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js'
  },
  extensions: [
   '.ts', '.js', '.vue'
  ]
 }
}

 

ここまで出来たらVue.jsを使う準備が完了です。TypeScript上でVue.jsの処理を書いていきます。最初にimport文でVue.jsのモジュールを読み込んでおきます。あとはVueインスタンスを作成して、その中に処理を入れていく形となります。

【index.ts】

'use strict';

import Vue from 'vue';

new Vue({
 el: '#app',
 data() {
  ........
 },
 computed: {
  ........
 },
 created() {
  console.log('Hello Vue.js!!');
 },
 mounted() {
  ........
 },
 methods: {
  ........
 }
)}

 

上記コードで実際にVue.jsが動作しているか確認してみると、指定したメッセージが問題なく表示されました。

【console.log】

Hello Vue.js!!

 

また、場合によってはTypeScript上でインポートして、Vue.jsが使えているにも関わらず、モジュールが見つからないというエラーが表示されることがあります。

Cannot find module 'vue'.

 

その場合には、プロジェクトのルートディレクトリ直下に「types.d.ts」という下記のようなファイルを作成しておくことで対応できます。これでエラーが表示されなくなりました。

【types.d.ts】

declare module 'vue';
declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}

 


 

今回はwebpackとTypeScriptをのプロジェクト内でVue.jsを使えるように環境構築する方法についてまとめてみました。Vue.jsはとても便利なフレームワークで、DOMを伴う複雑な処理も簡単に実装することができ、開発できる幅も広がりますね。

 

(参考にさせて頂いたサイト)
最新版TypeScript+webpack 4の環境構築まとめ
インストール(さまざまなビルドについて)

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?