Skip to content

Commit

Permalink
docs: improve migration from v2 guide (#8417)
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red committed May 31, 2022
1 parent cfc37ac commit f2c869d
Showing 1 changed file with 40 additions and 4 deletions.
44 changes: 40 additions & 4 deletions docs/guide/migration.md
Expand Up @@ -19,14 +19,18 @@ A small fraction of users will now require using [@vitejs/plugin-legacy](https:/

- The following options that were already deprecated in v2 have been removed:

- `optimizeDeps.keepNames` (switch to [`optimizeDeps.esbuildOptions.keepNames`](../config/dep-optimization-options.md#optimizedepsesbuildoptions))
- `build.base` (switch to [`base`](../config/shared-options.md#base))
- `alias` (switch to [`resolve.alias`](../config/shared-options.md#resolvealias))
- `dedupe` (switch to [`resolve.dedupe`](../config/shared-options.md#resolvededupe))
- `polyfillDynamicImport` (use [`@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) for browsers without dynamic import support)
- `build.base` (switch to [`base`](../config/shared-options.md#base))
- `build.brotliSize` (switch to [`build.reportCompressedSize`](../config/build-options.md#build-reportcompressedsize))
- `build.cleanCssOptions` (Vite now uses esbuild for CSS minification)
- `build.polyfillDynamicImport` (use [`@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) for browsers without dynamic import support)
- `optimizeDeps.keepNames` (switch to [`optimizeDeps.esbuildOptions.keepNames`](../config/dep-optimization-options.md#optimizedepsesbuildoptions))

## Dev Server Changes

Vite's default dev server port is now 5173. You can use [`server.port`](../config/server-options.md#server-port) to set it to 3000.

Vite optimizes dependencies with esbuild to both convert CJS-only deps to ESM and to reduce the number of modules the browser needs to request. In v3, the default strategy to discover and batch dependencies has changed. Vite no longer pre-scans user code with esbuild to get an initial list of dependencies on cold start. Instead, it delays the first dependency optimization run until every imported user module on load is processed.

To get back the v2 strategy, you can use [`optimizeDeps.devScan`](../config/dep-optimization-options.md#optimizedepsdevscan).
Expand All @@ -45,9 +49,41 @@ If using ESM for SSR isn't possible in your project, you can set `ssr.format: 'c

## General Changes

- JS file extensions in SSR and lib mode now use a valid extension (`js`, `mjs`, or `cjs`) for output JS entries and chunks based on their format and the package type.

### `import.meta.glob`

- [Raw `import.meta.glob`](features.md#glob-import-as) switched from `{ assert: { type: 'raw' }}` to `{ as: 'raw' }`
- Keys of `import.meta.glob` are now relative to the current module.

- JS file extensions in SSR and lib mode now use a valid extension (`js`, `mjs`, or `cjs`) for output JS entries and chunks based on their format and the package type.
```diff
// file: /foo/index.js
const modules = import.meta.glob('../foo/*.js')

// transformed:
const modules = {
- '../foo/bar.js': () => {}
+ './bar.js': () => {}
}
```

- When using an alias with `import.meta.glob`, the keys are always absolute.
- `import.meta.globEager` is now deprecated. Use `import.meta.glob('*', { eager: true })` instead.

### WebAssembly support

`import init from 'example.wasm'` syntax is dropped to prevent future collision with ["ESM integration for Wasm"](https://github.com/WebAssembly/esm-integration).
You can use `?init` which is similar to the previous behavior.

```diff
-import init from 'example.wasm'
+import init from 'example.wasm?init'

-init().then((instance) => {
+init().then(({ exports }) => {
exports.test()
})
```

## Migration from v1

Expand Down

0 comments on commit f2c869d

Please sign in to comment.