ViteでJavaScriptとSCSSをビルド

1
├── public // この中にビルドする
2
│   └── assets
3
│       ├── css
4
│       │   ├── styles1.css // バンドルCSSのみそれぞれビルドする
5
│       │   └── styles2.css
6
│       └── js
7
│           ├── sample1.js // JSをそれぞれビルドする
8
│           └── sample2.js
9
├── src
10
│   ├── js
11
│   │   ├── sample
12
│   │   │   └── sample2.js
13
│   │   └── sample1.js
14
│   └── scss
15
│       ├── _sample1.scss
16
│       ├── sample
17
│       │   └── _sample2.scss
18
│       ├── styles1.scss
19
│       └── styles2.scss
20
└── vite.config.js

1
npm init vite@latest .

1
✔ Select a framework: › Vanilla
2
✔ Select a variant: › JavaScript

1
npm install
2
npm run dev
3
# http://localhost:5173/

1
npm i -D sass

1
import { defineConfig } from 'vite';
2
import fs from 'fs';
3
import path from 'path';
4

5
/**
6
 * 任意ディレクトリの配下にある任意ファイルのリストを作成する。
7
 *
8
 * @param {string} directoryPath - 処理するディレクトリ名
9
 * @param {string[]} extensionList - 対象とするファイルの拡張子（例：['.scss']）
10
 * @return {void}
11
 */
12
const createFilePathList = (directoryPath, extensionList) => {
13
  const filePathList = [];
14

15
  // 処理を関数にまとめて、ディレクトリの場合に再帰できるようにする
16
  const main = (directoryPath, extensionList) => {
17
    if (!fs.existsSync(directoryPath)) return;
18
    const allDirents = fs.readdirSync(directoryPath, { withFileTypes: true });
19

20
    for (const dirent of allDirents) {
21
      if (dirent.isDirectory()) {
22
        const retryPath = path.join(directoryPath, dirent.name)
23
        main(retryPath, extensionList)
24
      } else if (dirent.isFile() && extensionList.includes(path.extname(dirent.name))) {
25
        // パーシャルファイルは無視する
26
        if (dirent.name[0] === '_') continue;
27
        filePathList.push(path.join(directoryPath, dirent.name));
28
      }
29
    }
30
  }
31
  main(directoryPath, extensionList);
32

33
  return filePathList;
34
}
35

36
// SCSSとJSのパス一覧を作成
37
const scssPathList = createFilePathList('src/scss', ['.scss']);
38
const jsPathList = createFilePathList('src/js', ['.js']);
39
const inputPathList = [...scssPathList, ...jsPathList];
40

41
// 任意のディレクトリにビルドする
42
const outDir = 'public';
43

44
export default defineConfig({
45
  // outDirに「public」を指定する場合は、publicDirを無効にしておかないと警告が出るみたい
46
  publicDir: outDir === 'public' ? false : true,
47
  build: {
48
    outDir: outDir,
49
    rollupOptions: {
50
      input: inputPathList,
51
      output: {
52
        assetFileNames: (file) => {
53
          // CSSのビルド
54
          const cssRegex = /\.css$/i;
55
          if (cssRegex.test(file.names[0])) {
56
            return `assets/css/[name].css`;
57
          } else {
58
            return;
59
          }
60
        },
61
        // JSのビルド
62
        entryFileNames: (_file) => {
63
          return `assets/js/[name].js`;
64
        }
65
      },
66
      plugins: [
67
        // 各JSファイルを即時関数でラップする
68
        // https://stackoverflow.com/questions/73713323/how-to-wrap-vite-build-in-iife-and-still-have-all-the-dependencies-bundled-into
69
        {
70
          name: 'wrap-in-iife',
71
          generateBundle(outputOptions, bundle) {
72
            Object.keys(bundle).forEach((fileName) => {
73
              const file = bundle[fileName]
74
              if (fileName.slice(-3) === '.js' && 'code' in file) {
75
                file.code = `(() => {\n${file.code}})();`;
76
              }
77
            })
78
          }
79
        }
80
      ]
81
    },
82
    // ひとつのCSSにまとめる場合
83
    // cssCodeSplit: false,
84
    // CSS、JavaScriptを圧縮したくない場合
85
    // minify: false
86
  }
87
});