share facebook facebook twitter menu hatena pocket slack

2018.09.20 THU

TypeScriptなVue.jsで環境ごとに設定ファイルを読み込みこめるようにしてみた

甲斐 甲

WRITTEN BY 甲斐 甲

概要

Vue.jsで設定ファイルを環境ごとに読み込みたかった。
以下を参考にTypeScriptでもできるようにしてみました。

Vue.js + webpack で環境ごとに設定ファイルを分ける
https://qiita.com/zaru/items/45a94a2d95001cfe5ead

手順

プロジェクト作成

Vue.jsのプロジェクトを作成するところから。Dockerで環境作ってますがローカルで実行しても問題ありません。好みです。

言語やTypeScriptです。じゃないと以下の手順が破綻します^^;;;

GitHubに利用したプロジェクトをUPしています。環境構築が面倒!けど試したい///という方はどうぞ。
https://github.com/kai-kou/vue-js-typescript-global-mixin.git

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> vi Dockerfile
> vi docker-compose.yml

Dockerfile

FROM node:10.8.0-stretch

RUN npm install --global @vue/cli

WORKDIR /projects

docker-compose.yml

version: '3'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - ".:/projects"
    tty: true
> docker-compose up -d
> docker-compose exec app bash

言語をTypeScriptで。あとは適当で良いです。

コンテナ内

> vue create app

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn

設定ファイルの用意

> cd app/
> mkdir src/configs
> touch src/configs/development.ts
> vi src/configs/development.ts

app/src/configs/development.ts

export default {
  hoge: {
    hoge: 'hoge',
    fuge: 'fuge',
  },
};

他の環境の設定ファイルも用意します。

> cp src/configs/development.ts src/configs/production.ts
> cp src/configs/development.ts src/configs/test.ts

configディレクトリのエイリアス設定

参考にさせてもらった記事だと、Webpack.config.jsに設定を追加する感じだったのですが、Vue-CLI3系はvue.config.jsを利用するみたいです。

> touch vue.config.js
> vi vue.config.js

app/vue.config.js

var path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        config: path.resolve(`src/configs/${process.env.NODE_ENV}.ts`),
      }
    }
  }
};

tslint対策

このままだとWebpackの設定で追加したaliasをtslintさんが読み取ってくれないので、無視してもらうようにお願いします。ここはもっと良い方法がありそうです。
ファイル名は任意です。

> touch src/types.d.ts
> vi src/types.d.ts

src/types.d.ts

declare module 'config';

設定ファイルの読み込み

せっかくTypeScriptを使っているので、ここでは、各コンポーネントの基底クラスを実装してみました。ここももっと良い方法がありそうです。
Vue.jsなのでMixinどうしたらいいのかなぁと悩んでて、以下記事をみつけて、あ〜それでいいのかぁとなりました。感謝!

VueとTypeScriptとMixin
https://qiita.com/totto357/items/4b20accb64f926cdfc30

> touch src/components/Base.ts
> vi src/components/Base.ts

app/src/components/Base.ts

import Vue from 'vue';
import Component from 'vue-class-component';
import config from 'config';

@Component
export default class Base extends Vue {
  protected config?: any;

  protected created() {
    this.config = config;
  }
}

で、ここでは最初から用意されているコンポーネントでconfigが利用できるようにしてみいます。
Baseコンポーネントを継承しても良いのですが、config をそのままインポートでも良いですね。お好みで。

vi src/components/HelloWorld.vue

app/src/components/HelloWorld.vue

<script lang="ts">
+import Component from 'vue-class-component';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Prop, Vue } from 'vue-property-decorator';
+import Base from '@/components/Base';
+import config from 'config';

@Component
-export default class HelloWorld extends Vue {
+export default class HelloWorld extends Base {
  @Prop() private msg!: string;
}

  created() {
    // 継承元から
    console.log(this.config);
    // 自前でimport
    console.log(config);
  }
</script>

では、確認してみましょう。

コンテナ内

> yarn serve

コンテナ外

> open http://localhost:8080/

(ポートが8081なのはご愛嬌^^

やったぜ。

やりようがいくらでもある感じなので、ベストプラクティスはどれ!ってなりがちですが、とりあえずご参考までに。

参考

Vue.js + webpack で環境ごとに設定ファイルを分ける
https://qiita.com/zaru/items/45a94a2d95001cfe5ead

VueとTypeScriptとMixin
https://qiita.com/totto357/items/4b20accb64f926cdfc30

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7

元記事はこちら

TypeScriptなVue.jsで環境ごとに設定ファイルを読み込みこめるようにしてみた

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。