viteを使用して、aliasなどの設定を行う

viteを使用して、vite.config.jsの設定を行うを少し行ったので、そのときのメモ。

viteのインストール

v1バージョンの場合 (非推奨)

※ project-appは制作したいアプリ名。

$ npm init vite-app project-app
// or
$ yarn create vite-app project-app

今回は非推奨にはなっていますが、v1の方を使用して制作して参ります。

github.com

v2バージョンの場合

$ npm init @vitejs/app project-app
// or
$ yarn create @vitejs/app project-app

github.com

v1からの移行を行たい場合

今回では詳しくは書きませんが、v1からv2に変更を行う場合は以下に詳しい説明があります。

vitejs.dev

今回使用するパッケージ・バージョン

{
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}

vite.config.jsの設定

参考

vitejs.dev

github.com

github.com

blog.zenpachi.dev

outDir, assetsDirの設定

module.exports = {
  outDir: 'dist',
  assetsDir: 'assets',
}

aliasの設定

+ const aliasRegx = /^~\//

+ const myResolver = {
+   alias(id) {
+     if (id.match(aliasRegx)) {
+       return resolve('/src', id.replace(aliasRegx, ''))
+     }
+   },
+ }

module.exports = {
  outDir: 'dist',
  assetsDir: 'assets',
+  resolvers: [myResolver],
}

拡張子省略の設定

+ import { resolve, join } from 'path'
+ import { statSync } from 'fs'

const aliasRegx = /^~\//
/*
 * .scssも追加したい場合は 
 * const supportedExts = ['.vue', '.scss'] 
 * のように記載を行う
*/
+ const supportedExts = ['.vue'] 

+ const isFile = (file) => {
+   try {
+     return statSync(file).isFile()
+   } catch (e) {
+     return false
+   }
+ }

+ const resolveExt = (_path) => {
+   let resolvedPath = _path
+   if (!isFile(join(__dirname, resolvedPath))) {
+     for (const ext of supportedExts) {
+       if (isFile(join(__dirname, `${resolvedPath}${ext}`))) {
+         resolvedPath += ext
+         break
+       }
+       if (isFile(join(__dirname, `${resolvedPath}/index${ext}`))) {
+         resolvedPath += `/index${ext}`
+         break
+       }
+     }
+   }
+   return resolvedPath
+ }

const myResolver = {
  alias(id) {
    if (id.match(aliasRegx)) {
      return resolve('/src', id.replace(aliasRegx, ''))
    }
  },
+   requestToFile(req) {
+     if (resolveExt(req) !== req) {
+       return resolve(__dirname, resolveExt(req))
+     }
+   },
}

module.exports = {
  outDir: 'dist',
  assetsDir: 'assets',
  resolvers: [myResolver],
}

vite.config.jsの最終結果

import { resolve, join } from 'path'
import { statSync } from 'fs'

const aliasRegx = /^~\//
const supportedExts = ['.vue']

const isFile = (file) => {
  try {
    return statSync(file).isFile()
  } catch (e) {
    return false
  }
}

const resolveExt = (_path) => {
  let resolvedPath = _path
  if (!isFile(join(__dirname, resolvedPath))) {
    for (const ext of supportedExts) {
      if (isFile(join(__dirname, `${resolvedPath}${ext}`))) {
        resolvedPath += ext
        break
      }
      if (isFile(join(__dirname, `${resolvedPath}/index${ext}`))) {
        resolvedPath += `/index${ext}`
        break
      }
    }
  }
  return resolvedPath
}

const myResolver = {
  alias(id) {
    if (id.match(aliasRegx)) {
      return resolve('/src', id.replace(aliasRegx, ''))
    }
  },
  requestToFile(req) {
    if (resolveExt(req) !== req) {
      return resolve(__dirname, resolveExt(req))
    }
  },
}

module.exports = {
  outDir: 'dist',
  assetsDir: 'assets',
  resolvers: [myResolver],
}