既存のプロジェクトにて型定義やviteが使いたい。
新規プロジェクトであればテンプレートを使用すれば良いが、既存プロジェクトを移行させる方法を模索する。
目標としてはtypescriptの導入とLaravel Mixをviteへの置き換え。
viteはプロジェクト側の制約があるので難しいかも。

環境

vue 3.2.29
Laravel Mix 6.0.41
Node.js 18.14.2
MacOS Sonoma 14

k8lab 2023/10/17に更新

そもそもどのように動作しているのかが理解出来ていないので単純にパッケージをインストールするだけでは使えない。
一つずつ理解を進めるしかないのでひとまずは空のプロジェクトを作成

npm init

typescriptをインストール

npm i -D typescript

インストールされたバージョンは「5.2.2」

tsconfig.jsonを作成

npx tsc --init

コメントアウトされている箇所を全て削除

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "allowJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,    
    "skipLibCheck": true
  }
}

k8lab 2023/10/17に更新

srcディレクトリを作成し、その中にエントリーポイント用のソースを作成
index.ts

const message = 'Hello World';

console.log(message);

vue+tsテンプレートからプロジェクトを作成した場合にインストールされるパッケージの内、必要になりそうなパッケージ

vite

高速でビルドしてくれるビルドツール

@vitejs/plugin-vue

vite用のvue sfcファイルのサポートしてくれるプラグイン

@vue/tsconfig

npm-run-all

並列でnpm-scriptsを実行できるようにするコマンドツール

vue-tsc

SFCの型チェック及び型定義をサポートするツール

上記のパッケージをインストール

npm i -D vite @vitejs/plugin-vue @vue/tsconfig npm-run-all vue-tsc

k8lab 2023/10/17

package.jsonのscriptsに以下を追記

  "scripts": {
    "build": "run-p type-check build-only",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "build-only": "vite build"
  },

tsconfig.app.jsonを作成

{
    "extends": "@vue/tsconfig/tsconfig.dom.json",
    "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
    "exclude": ["src/**/__tests__/*"],
    "compilerOptions": {
      "composite": true,
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"]
      }
    }
  }

vite.config.tsを作成

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({

  plugins: [vue()],

  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  },

});

ビルドしてみる

npm run build

成功するとdistディレクトリ内に「my-lib.es.js」と「my-lib.umd.js」が出力される

ESモジュール用とumdモジュールの違い

ESモジュール(ESM)

モダンブラウザ向けに策定されたモジュール形式

UMDモジュール

簡単に言えばサーバーでもブラウザでも使用ができるモジュール。
（Node.js向けのCommonJSとブラウザ向けのAMD）

この辺りが本当に全く理解していない。