5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt.js+TypeScript+Vutify(2.0)+Jestの環境設定

Last updated at Posted at 2019-07-26

###初めに
Nuxtの初めのcreateなどはこちらから初めて下さい。
また、自分用の環境セットのメモのつもりで書いています。

##package.json
*一度yarn upgrade --latest を実行しています。

package.json
{
  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/vuetify": "1.0.0",                     /*以前のバージョンから大幅にアップデートが掛かっているので注意して下さい */
    "@types/webpack": "^4.32.0",
    "@typescript-eslint/eslint-plugin": "^1.13.0",
    "@typescript-eslint/parser": "^1.13.0",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "nuxt": "^2.8.1",
    "nuxt-fontawesome": "^0.4.0",
    "sass-loader": "^7.1.0",
    "sinon-chai": "^3.3.0",
    "ts-node": "^8.3.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-property-decorator": "^8.2.1",
    "vuex": "^3.1.1",
    "vuex-class": "^0.3.2",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@mdi/font": "^3.8.95",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^0.2.1",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^24.8.0",
    "babel-preset-env": "^1.7.0",
    "cypress": "^3.4.0",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-airbnb-base": "^13.2.0",
    "eslint-config-airbnb-vue": "^2.0.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-config-standard": ">=13.0.1",
    "eslint-plugin-import": ">=2.18.2",
    "eslint-plugin-jest": ">=22.13.0",
    "eslint-plugin-node": ">=9.1.0",
    "eslint-plugin-nuxt": ">=0.4.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-promise": ">=4.2.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "jest": "^24.8.0",
    "nodemon": "^1.19.1",
    "prettier": "^1.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "ts-jest": "^24.0.2",
    "typescript": "^3.5.3",
    "vue-jest": "^3.0.4"
  }
}

##tsconfig.json
TypeScriptを使いたいのでtsconfigを設定します。

tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app",
      "@types/jest",
      "cypress"
    ]
  }
}

##nuxt.config.ts
nuxt createした際のデフォルトの設定もあります。

nuxt.config.ts
import colors from 'vuetify/es5/util/colors'
import NuxtConfiguration from '@nuxt/config'

const nuxtConfig: NuxtConfiguration = {
  build: {
    extend (config, {isClient}) {
      if (isClient) {
        config.devtool = '#source-map'
      }
    }
  }
};

export default {
  mode: 'spa',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
,
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/axios'
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    theme: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      info: colors.teal.lighten1,
      warning: colors.amber.base,
      error: colors.deepOrange.accent4,
      success: colors.green.accent3
    },
    icons: {
      iconfont: 'mdi',
    },
  },
  axios: {},
  extensions: ['ts', 'js'],
  srcDir: 'src/'
}

##jest

jest.config.js
module.exports = {
  preset: 'ts-jest',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/src/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['js', 'vue', 'json', 'ts'],
  testMatch: ['<rootDir>/test/unit/**/*.ts'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.ts?$': 'ts-jest',
  },
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json',
    },
  },
  collectCoverage: true,
  collectCoverageFrom: ['<rootDir>/src/components/**/*.vue', '<rootDir>/src/pages/**/*.vue'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  coverageReporters: ['html', 'text-summary'],
};

間違っているような設定があるかもしれませんが、ご容赦ください。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?