Closed15

viteを試す

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

nodenv global 16.1.0

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

React + TypeScriptでやる

yarn create @vitejs/app vite-react-sample --template react-ts
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"
  }
}
cd vite-react-sample
yarn install
yarn dev

動いた

デフォルトで型チェックが入ってないので、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使っていればチェックしてくれるし。

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

 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
yarn build

→ /dist に生成される

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"
  }
}

出力ディレクトリ変更

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

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

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'

となる

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

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

watchする場合

yarn build -- --watch

rollupのwatchが動いてるポイ

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

./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にクローズされました
ログインするとコメントできます