Zenn
Closed15

viteを試す

frontend
Vite
corocncorocn

せっかくなのでnodeを最新に

nodenv global 16.1.0

個人マシンなのでglobalでいいや・・・

corocncorocn
cat package.json

{
  "name": "vite-react-sample",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "typescript": "^4.1.2",
    "vite": "^2.2.3"
  }
}
corocncorocn

デフォルトで型チェックが入ってないので、ts-checkerをいれようか・・と思ったが

Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process (you can run tsc --noEmit in the build script or install vue-tsc and run vue-tsc --noEmit to also type check your *.vue files).

「viteではサポートしないよ。IDEやbuild processで行う前提だよ。」とのこと。

たしかに、業務でビルド時にts-checker動かしてたらメモリリークしてはずした経験があるので、この方針でよさそうVSCodeやIntelliJ系のIDE使っていればチェックしてくれるし。

一応プラグイン自体はあるみたい。

corocncorocn
 tree -I node_modules 
                                                                                                                                            日 
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   └── main.tsx
├── tsconfig.json
├── vite.config.ts
└── yarn.lock
corocncorocn

Rails等で使えるように、manifestを生成してみる。

vite.config.ts
export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    manifest: true,
    rollupOptions: {
      input: '/src/main.tsx'
    }
  }
})

yarn build

.
├── assets
│   ├── logo.ecc203fb.svg
│   ├── main.6bf5191d.js
│   ├── main.caf5225f.css
│   └── vendor.de62f314.js
└── manifest.json
manifest.json
{
  "src/main.tsx": {
    "file": "assets/main.6bf5191d.js",
    "src": "src/main.tsx",
    "isEntry": true,
    "imports": [
      "_vendor.de62f314.js"
    ],
    "css": [
      "assets/main.caf5225f.css"
    ],
    "assets": [
      "assets/logo.ecc203fb.svg"
    ]
  },
  "_vendor.de62f314.js": {
    "file": "assets/vendor.de62f314.js"
  }
}
corocncorocn

出力ディレクトリ変更

vite.config.ts
export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    manifest: true,
    rollupOptions: {
      input: '/src/main.tsx'
    },
    outDir: '/public/packs'
  }
})

outDirを指定すればおｋかなと思ったが失敗する。

EROFS: read-only file system, mkdir '/public'
error during build:
Error: EROFS: read-only file system, mkdir '/public'

outDir: './public/packs'

とすると、1回目のyarn build は成功するが、2回目実行すると

Error: ENAMETOOLONG: name too long, mkdir '/Users/corocn/work/vite-react-sample/public/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs/packs'

となる

corocncorocn

以下なら動いた
outDirとassetsDirは別で指定するのがよさそうぽい

export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    manifest: true,
    rollupOptions: {
      input: '/src/main.tsx'
    },
    outDir: 'public',
    assetsDir: 'packs'
  }
})
corocncorocn

watchする場合

yarn build -- --watch

rollupのwatchが動いてるポイ

corocncorocn

エントリポイントを複数作る

./src
├── component
│   ├── Admin.tsx
│   ├── App.css
│   └── App.tsx
├── entry
│   ├── admin.tsx
│   └── main.tsx
├── image
│   ├── favicon.svg
│   └── logo.svg
└── style
    └── index.css
vite.config.ts
export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    manifest: true,
    rollupOptions: {
      input: {
        main: 'src/entry/main.tsx',
        admin: 'src/entry/admin.tsx',
      }
    },
    outDir: 'public',
    assetsDir: 'packs'
  }
})

yarn dev用

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/image/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="main-root"></div>
    <script type="module" src="/src/entry/main.tsx"></script>
    <div id="admin-root"></div>
    <script type="module" src="/src/entry/admin.tsx"></script>
  </body>
</html>
manifest.json
{
  "src/entry/main.tsx": {
    "file": "packs/main.de2bba6e.js",
    "src": "src/entry/main.tsx",
    "isEntry": true,
    "imports": [
      "_index.c78be567.js",
      "_vendor.bb4e67ce.js"
    ],
    "css": [
      "packs/main.c231f81c.css"
    ],
    "assets": [
      "packs/logo.ecc203fb.svg"
    ]
  },
  "src/entry/admin.tsx": {
    "file": "packs/admin.9bff4677.js",
    "src": "src/entry/admin.tsx",
    "isEntry": true,
    "imports": [
      "_index.c78be567.js",
      "_vendor.bb4e67ce.js"
    ]
  },
  "_vendor.bb4e67ce.js": {
    "file": "packs/vendor.bb4e67ce.js"
  },
  "_index.c78be567.js": {
    "file": "packs/index.c78be567.js",
    "css": [
      "packs/index.5174f4df.css"
    ]
  }
}
このスクラップは2021/09/10にクローズされました