diff --git a/.eslintrc.js b/.eslintrc.js index f81c19f74cc7f3..64ccc552427a80 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,7 +12,7 @@ module.exports = { 'error', { allowModules: ['types', 'estree', 'testUtils'], - tryExtensions: ['.ts', '.js'] + tryExtensions: ['.ts', '.js', '.jsx', '.tsx'] } ], 'node/no-missing-require': [ @@ -20,7 +20,7 @@ module.exports = { { // for try-catching yarn pnp allowModules: ['pnpapi'], - tryExtensions: ['.ts', '.js'] + tryExtensions: ['.ts', '.js', '.jsx', '.tsx'] } ], 'node/no-restricted-require': [ @@ -38,7 +38,7 @@ module.exports = { 'node/no-extraneous-import': [ 'error', { - allowModules: ['vite'] + allowModules: ['vite', 'less', 'sass'] } ], 'node/no-extraneous-require': [ diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000000000..c504c325f08040 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,8 @@ +blank_issues_enabled: false +contact_links: + - name: Discord Chat + url: https://chat.vitejs.dev + about: Ask questions and discuss with other Vite users in real time. + - name: Questions & Discussions + url: https://github.com/vitejs/vite/discussions + about: Use GitHub discussions for message-board style questions and discussions. diff --git a/.github/commit-convention.md b/.github/commit-convention.md index 609bbe632e004b..c66c7b9676ab3a 100644 --- a/.github/commit-convention.md +++ b/.github/commit-convention.md @@ -7,7 +7,7 @@ Messages must be matched by the following regex: ``` js -/^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|types|wip): .{1,50}/ +/^(revert: )?(feat|fix|docs|dx|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps)(\(.+\))?: .{1,50}/ ``` #### Examples diff --git a/.github/contributing.md b/.github/contributing.md index 6caa68f03288ac..09767a1890dc44 100644 --- a/.github/contributing.md +++ b/.github/contributing.md @@ -1,6 +1,48 @@ # Vite Contributing Guide -Hi! We are really excited that you are interested in contributing to Vite. Before submitting your contribution, please make sure to take a moment and read through the following guidelines: +Hi! We are really excited that you are interested in contributing to Vite. Before submitting your contribution, please make sure to take a moment and read through the following guide: + +## Repo Setup + +The Vite repo is a monorepo using Yarn workspaces. The package manager used to install and link dependencies must be [Yarn v1](https://classic.yarnpkg.com/). + +To development and test the core `vite` package: + +1. Go to `packages/vite` and run `yarn dev`. This starts `tsc` in watch mode. + +2. Run `yarn link` in `packages/vite`. This links `vite` globally so that you can: + + - Run `yarn link vite` in another Vite project to use the locally built Vite; + - Use the `vite` binary anywhere. + +## Running Tests + +Each package under `packages/playground/` contains a `__tests__` directory. The tests are run using [Jest](https://jestjs.io/) + [Playwright](https://playwright.dev/) with custom integrations to make writing tests simple. The detailed setup is inside `jest.config.js` and `scripts/jest*` files. + +Each test can be run under either dev server mode or build mode. + +- `yarn test` by default runs every test in both serve and build mode. + +- `yarn test-serve` runs tests only under serve mode. + +- `yarn test-build` runs tests only under build mode. + +- You can also use `yarn test-serve [match]` or `yarn test-build [match]` to run tests in a specific playground package, e.g. `yarn test-serve css` will run tests for both `playground/css` and `playground/css-codesplit` under serve mode. + + Note package matching is not aviable for the `yarn test` script, which always runs all tests. + +### Test Env and Helpers + +Inside playground tests, a global `page` object is automatically available, which is a Playwright [`Page`](https://playwright.dev/docs/api/class-page) instance that has already navigated to the served page of the current playground. So writing a test is as simple as: + +```js +test('should work', async () => { + expect(await page.textContent('.foo')).toMatch('foo') +}) +``` + +Some common test helpers, e.g. `testDir`, `isBuild` or `editFile` are available in `packages/playground/testUtils.ts`. + ## Pull Request Guidelines - Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch. diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index ff84a7e48a0b56..00000000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,1646 +0,0 @@ -# [1.0.0-rc.13](https://github.com/vitejs/vite/compare/v1.0.0-rc.12...v1.0.0-rc.13) (2020-11-25) - - - -# [1.0.0-rc.11](https://github.com/vitejs/vite/compare/v1.0.0-rc.10...v1.0.0-rc.11) (2020-11-25) - - -### Bug Fixes - -* move https-proxy types to dependencies ([2753658](https://github.com/vitejs/vite/commit/275365862a1a94976686d5d5f8f1775f8a724b6d)) - - - -# [1.0.0-rc.10](https://github.com/vitejs/vite/compare/v1.0.0-rc.9...v1.0.0-rc.10) (2020-11-25) - - -### Bug Fixes - -* multiple builds share esbuild process ([#1125](https://github.com/vitejs/vite/issues/1125)) ([f270440](https://github.com/vitejs/vite/commit/f27044054e7a7a28239a7fcdb601913f0aacd5ac)), closes [#1098](https://github.com/vitejs/vite/issues/1098) -* **build:** always pass `namespaceToStringTag`, let output module has… ([#1057](https://github.com/vitejs/vite/issues/1057)) ([8cd3e85](https://github.com/vitejs/vite/commit/8cd3e85871bd25992c6c8113a61b3df3a6a98f52)), closes [#1048](https://github.com/vitejs/vite/issues/1048) -* **cli:** specify correct arguments to options ([6b98b73](https://github.com/vitejs/vite/commit/6b98b7392af7761def2011aff83116efb5ab8a82)) -* **config:** avoid overwriting defined .env values ([f0e50bd](https://github.com/vitejs/vite/commit/f0e50bd7ff708f56669a9b46aaff913b3526f58c)) -* **config:** move `dotenvExpand` back into `resolveConfig` ([dd03c62](https://github.com/vitejs/vite/commit/dd03c6255f0ac62b72daa523ed8ba6a4f09a4be2)) -* **dev:** chokidar `ignored` ([ce332d1](https://github.com/vitejs/vite/commit/ce332d1415ce50760ed993c7a65042888c25c5cd)), closes [#1132](https://github.com/vitejs/vite/issues/1132) -* **dev:** respect `[@vite-ignore](https://github.com/vite-ignore)` inside module rewrite ([#1011](https://github.com/vitejs/vite/issues/1011)) ([6fbae67](https://github.com/vitejs/vite/commit/6fbae678683d3be358b7270497fd9cbd03c39e9a)), closes [#1007](https://github.com/vitejs/vite/issues/1007) -* **dev:** respect sourceRoot when rewriting source map ([#1073](https://github.com/vitejs/vite/issues/1073)) ([b4afcf1](https://github.com/vitejs/vite/commit/b4afcf1507cf313beb9ecca245be9e6ceb2b126c)) -* **dev:** transform import for commonjs dependencies ([#837](https://github.com/vitejs/vite/issues/837)) ([51aead4](https://github.com/vitejs/vite/commit/51aead44ffb22c7d0c29a489f67b7eb7b9bba4f1)) -* **docs:** README es-dev-server broken link ([#1081](https://github.com/vitejs/vite/issues/1081)) ([0d2768d](https://github.com/vitejs/vite/commit/0d2768d9e53be8c685fb69416ab9dd7df63207cc)) -* `env` key in `UserConfig` should not be required ([#1097](https://github.com/vitejs/vite/issues/1097)) ([f33e89d](https://github.com/vitejs/vite/commit/f33e89db2c944933b52524eff0263cc9546aa0dd)) -* always set NODE_ENV for build ([effc159](https://github.com/vitejs/vite/commit/effc159822c08178825fcdfa99f9c8e672ba653c)) -* cac argv keys are in camel case ([#1092](https://github.com/vitejs/vite/issues/1092)) ([8520e76](https://github.com/vitejs/vite/commit/8520e76cdc15654f0c197cf63539428875aff2c7)) -* indexHtmlPath can be an absolute path ([#1032](https://github.com/vitejs/vite/issues/1032)) ([bc1a8ee](https://github.com/vitejs/vite/commit/bc1a8eeef725de57d0e74d7eb43803f3ea929ac8)) -* target ES2018 instead of ESNEXT ([#1110](https://github.com/vitejs/vite/issues/1110)) ([ce633f4](https://github.com/vitejs/vite/commit/ce633f48602f0e1c6c0d922d03477bdc4143aef0)) -* **types:** buildPluginHtml does not need `config.env` to exist ([#1091](https://github.com/vitejs/vite/issues/1091)) ([29f20e5](https://github.com/vitejs/vite/commit/29f20e50d10c8d1f8be59d249f6cb3538c24a5b5)) -* indentation for injected html tags ([#1068](https://github.com/vitejs/vite/issues/1068)) ([ac5ee6f](https://github.com/vitejs/vite/commit/ac5ee6f5e7024aa69c6e07149885f0b6e00a4f38)) -* only pass valid rollup options to avoid warning ([#1034](https://github.com/vitejs/vite/issues/1034)) ([128d5ff](https://github.com/vitejs/vite/commit/128d5ff7bbb113bcf05bf595201e7dfdec1a147a)) -* **types:** ws should be optional ([#1010](https://github.com/vitejs/vite/issues/1010)) ([5b16cf9](https://github.com/vitejs/vite/commit/5b16cf9f5c627327e53e89c49defe853d358b383)) - - -### Features - -* support new versions of experimental features in `@vue/compiler-sfc` ([#1121](https://github.com/vitejs/vite/issues/1121)) ([a928d74](https://github.com/vitejs/vite/commit/a928d74ae4be9e054bfdab35f2a85a774e81ecb0)) -* **build:** make `rollupOutputOptions` and `rollupPluginVueOptions` overridable ([#1117](https://github.com/vitejs/vite/issues/1117)) ([39bdd45](https://github.com/vitejs/vite/commit/39bdd45290a6fdab31aa8b02caa7d8465d12633c)) -* expose `loadEnv` in public api ([f3e4017](https://github.com/vitejs/vite/commit/f3e4017b96b2839d349e34b249966a3f6be11315)) -* use cac for argv parsing and cli help ([#971](https://github.com/vitejs/vite/issues/971)) ([88bb4ff](https://github.com/vitejs/vite/commit/88bb4ff7d7b70d5668c889188cd95a61d2dc3c1e)) -* **types:** include http-proxy options in ProxiesOptions type ([#1037](https://github.com/vitejs/vite/issues/1037)) ([261c8c8](https://github.com/vitejs/vite/commit/261c8c82f689a7a004670bca06097263e6983a1d)) - - -### Performance Improvements - -* remove empty chunk from css extraction ([963614b](https://github.com/vitejs/vite/commit/963614bff7039207c0b2d9e8c2c5780b74ee176a)) - - - -# [1.0.0-rc.9](https://github.com/vitejs/vite/compare/v1.0.0-rc.8...v1.0.0-rc.9) (2020-11-02) - - -### Bug Fixes - -* **dev:** remove comment for dynamic import inside server rewrite ([#1001](https://github.com/vitejs/vite/issues/1001)) ([4ccff7a](https://github.com/vitejs/vite/commit/4ccff7a109c4c339d3a688bc5d091defe274e927)), closes [#998](https://github.com/vitejs/vite/issues/998) -* **hmr:** infer hmr hostname on client ([#980](https://github.com/vitejs/vite/issues/980)) ([858b2bf](https://github.com/vitejs/vite/commit/858b2bfe530495afcc0540c710e7edafd0e06d03)) -* always emit assets virtually + ensure correct asset paths in ssrBuild ([b8e80ba](https://github.com/vitejs/vite/commit/b8e80ba7142dbddd7dd7f37ca74037bc9dd193f2)) -* **build:** add `write` condition ([e5fdc7e](https://github.com/vitejs/vite/commit/e5fdc7e35e3b009a1ef45c97ae9744f8669105ad)) -* **build:** always render the index.html ([5e7c309](https://github.com/vitejs/vite/commit/5e7c309baa16b78fbfdfbf3fffff7af775c26047)) -* **build:** remove `outDir` before build ([d1599f9](https://github.com/vitejs/vite/commit/d1599f94fb6c0fc7fdeb67ae54ad18407ce16a10)) -* **build:** resolve rollup warning when using pluginsPreBuild ([40e1d87](https://github.com/vitejs/vite/commit/40e1d8721631031fd1c05a6a793e36dd85506e4f)) -* **dev:** always proxy http request even `ws` option is truly ([32be77b](https://github.com/vitejs/vite/commit/32be77bce0257967c4234b822fecd6dbd8571931)), closes [#978](https://github.com/vitejs/vite/issues/978) - - -### Features - -* allow suppressing dynamic import warning with [@vite-ignore](https://github.com/vite-ignore) ([7ac483c](https://github.com/vitejs/vite/commit/7ac483ceacdbedb99cbcffbfc4d70ae7451dc018)) -* **build:** add "vite:emit" output plugin ([#977](https://github.com/vitejs/vite/issues/977)) ([9c2d435](https://github.com/vitejs/vite/commit/9c2d43530406c73d350efba804af8a8ea7718ae7)) -* **types:** add `ImportMetaEnv` global type ([03acecd](https://github.com/vitejs/vite/commit/03acecd797d8393e38c8a78f920c8e0927762018)) - - - -# [1.0.0-rc.8](https://github.com/vitejs/vite/compare/v1.0.0-rc.7...v1.0.0-rc.8) (2020-10-26) - - - -# [1.0.0-rc.7](https://github.com/vitejs/vite/compare/v1.0.0-rc.6...v1.0.0-rc.7) (2020-10-26) - - -### Bug Fixes - -* **build:** add `Symbol.toStringTag` when ssr build es module into cjs chunk ([#951](https://github.com/vitejs/vite/issues/951)) ([344a86a](https://github.com/vitejs/vite/commit/344a86a7f02727eaf34bef2eacef48099ffc686a)), closes [#764](https://github.com/vitejs/vite/issues/764) -* **dev:** resolve sub-package inside node module, let `module` filed inside `package.json` can be take first. ([76fcfa7](https://github.com/vitejs/vite/commit/76fcfa71e9fe8ee69f0bbb35cdfeeede6fe3bfe0)), closes [#829](https://github.com/vitejs/vite/issues/829) -* **hmr:** register component on import ([95e3342](https://github.com/vitejs/vite/commit/95e334296b2883b1deae5983042b089efe946f98)), closes [#959](https://github.com/vitejs/vite/issues/959) -* **hmr:** sniff hmr protocol on client when not specifically configured ([e1c7500](https://github.com/vitejs/vite/commit/e1c75003644868afaaaedd939eae5972f7ef40de)), closes [#956](https://github.com/vitejs/vite/issues/956) -* **html:** avoid mutating outer scope in `renderIndex` function ([f2da029](https://github.com/vitejs/vite/commit/f2da0293e7738bb6e579c934c3c1c35fcddc5b5d)) -* always resolve `outDir` relative to `root` ([f5dee86](https://github.com/vitejs/vite/commit/f5dee8611194cb81dcdd44787c83777c92fddefc)) -* update rollup-pluginutils import ([#954](https://github.com/vitejs/vite/issues/954)) ([dcf1eaa](https://github.com/vitejs/vite/commit/dcf1eaa74ad53d63af5605f1be1224c019c7533d)) - - -### Features - -* add `configureBuild` hook ([1c2a9b9](https://github.com/vitejs/vite/commit/1c2a9b981c70ead236b4d91460ed23e3f619f41c)) -* let `configureBuild` hooks inject Rollup bundles ([03ef2ed](https://github.com/vitejs/vite/commit/03ef2ed00e4e1f519ce5aabf36700b2ac404f99d)) -* let build plugins return post-build hook ([ec47ab8](https://github.com/vitejs/vite/commit/ec47ab82f8127bbc174200267a93d1c8918c0ba2)) -* transforms for index.html ([#793](https://github.com/vitejs/vite/issues/793)) ([ebb964e](https://github.com/vitejs/vite/commit/ebb964e58568b818160ae8b2aa3168197d16720d)) -* **build:** emitManifest ([75d7679](https://github.com/vitejs/vite/commit/75d7679a8348f2df2cda21f805dc6df562fdb996)) -* **build:** support alternative entry for build ([6c66e31](https://github.com/vitejs/vite/commit/6c66e316c33105a894eff33343f0527139b06bd9)) -* **config:** add pluginsPreBuild, etc. for rollup ([#953](https://github.com/vitejs/vite/issues/953)) ([cd3666a](https://github.com/vitejs/vite/commit/cd3666ac6175344d7c0d88450ffdb824794e1e58)) -* **dev:** support configuring CORS ([f416f9f](https://github.com/vitejs/vite/commit/f416f9f32e80e7e6be508391053d155a3a5189d4)) - - -### Reverts - -* Revert "refactor: resolve relative path request inside unoptimized package wh… (#867)" ([ec8f46d](https://github.com/vitejs/vite/commit/ec8f46dd09ac3b2b7e6ffc709227af09addaef59)), closes [#867](https://github.com/vitejs/vite/issues/867) - - - -# [1.0.0-rc.6](https://github.com/vitejs/vite/compare/v1.0.0-rc.5...v1.0.0-rc.6) (2020-10-23) - - -### Bug Fixes - -* apply user rollup plugins last ([#855](https://github.com/vitejs/vite/issues/855)) ([1760658](https://github.com/vitejs/vite/commit/1760658de19e9df6ab67677993fc4defb329354a)) -* ensure source maps can be traced by debugger ([#886](https://github.com/vitejs/vite/issues/886)) ([ba7442f](https://github.com/vitejs/vite/commit/ba7442fffd1f4787bd542f09dae93bc3197e33f9)), closes [#675](https://github.com/vitejs/vite/issues/675) -* **build:** do not merge non-module inline scripts into bundle ([edf0886](https://github.com/vitejs/vite/commit/edf088686794869d3fa92c9cb4a6a15b04187d06)), closes [#719](https://github.com/vitejs/vite/issues/719) -* **build:** relative `sources` in production bundle sourcemap ([#934](https://github.com/vitejs/vite/issues/934)) ([8264fa8](https://github.com/vitejs/vite/commit/8264fa85904ef8f89065d76fc10b488a636306bf)) -* **config:** do not throw when user speicifies type: "module" in package.json ([8acd49e](https://github.com/vitejs/vite/commit/8acd49ee931e315b9b506e816972beb7e4786b59)), closes [#917](https://github.com/vitejs/vite/issues/917) -* **dev:** remove unnecessary warning ([#722](https://github.com/vitejs/vite/issues/722)) ([a2c4b24](https://github.com/vitejs/vite/commit/a2c4b24d4034242e6cf24a84fcc2cad94ae7aff4)), closes [#721](https://github.com/vitejs/vite/issues/721) -* **optimizer:** ignore `@types/*` packages inside optimizer ([#812](https://github.com/vitejs/vite/issues/812)) ([aa81eb3](https://github.com/vitejs/vite/commit/aa81eb34c19f55d6617de25a5aa9ad7adbe2eb8c)), closes [#804](https://github.com/vitejs/vite/issues/804) -* **optimizer:** remove `?commonjs-proxy` injected by `rollup-plugin-commonjs` for assets ([#908](https://github.com/vitejs/vite/issues/908)) ([e3e7059](https://github.com/vitejs/vite/commit/e3e7059e9403138c63198f2269056e0db1139d0e)), closes [#903](https://github.com/vitejs/vite/issues/903) -* **server:** only rewrite module script tags ([c18f387](https://github.com/vitejs/vite/commit/c18f3872a48cbcd493a83ee97c1441a92ac40e77)) -* **server:** read server port only after listening ([#943](https://github.com/vitejs/vite/issues/943)) ([eb039f9](https://github.com/vitejs/vite/commit/eb039f9821d96f7d3ec3ed839ba65a0fdcb8ceeb)) - - -### Features - -* Configurable asset inclusion ([#811](https://github.com/vitejs/vite/issues/811)) ([8378f1a](https://github.com/vitejs/vite/commit/8378f1a736eafa5d3eda856aaac0406ef430a9ae)), closes [#810](https://github.com/vitejs/vite/issues/810) -* inject module scripts into head instead of body ([#882](https://github.com/vitejs/vite/issues/882)) ([28678a9](https://github.com/vitejs/vite/commit/28678a96055839a7b3c6320fd486ae04f58d4dc3)), closes [#881](https://github.com/vitejs/vite/issues/881) -* let user config be a function ([#836](https://github.com/vitejs/vite/issues/836)) ([e06b73e](https://github.com/vitejs/vite/commit/e06b73e98c16decb79801293cb63076dc7bd4eee)) -* **hmr:** handle hmr when editing tailwind config ([#408](https://github.com/vitejs/vite/issues/408)) ([1d33ef3](https://github.com/vitejs/vite/commit/1d33ef38596c46a2e9ac96debb59c665e83614eb)) - - - -# [1.0.0-rc.5](https://github.com/vitejs/vite/compare/v1.0.0-rc.4...v1.0.0-rc.5) (2020-10-23) - - -### Bug Fixes - -* **build:** adjust allowed script tag types ([8b8f357](https://github.com/vitejs/vite/commit/8b8f3571558831c24a7b9b671dc8a1de427df51e)), closes [#724](https://github.com/vitejs/vite/issues/724) -* **build:** correct replace `define` ([e24133e](https://github.com/vitejs/vite/commit/e24133e51cb9d2fc4a338a6efd44a455978e5020)) -* **build:** create at most one `esbuildService` ([#694](https://github.com/vitejs/vite/issues/694)) ([2acae21](https://github.com/vitejs/vite/commit/2acae21b197ccbfc332651247ebe2f9b25fde238)), closes [#693](https://github.com/vitejs/vite/issues/693) -* **build:** css not be tree shake ([#803](https://github.com/vitejs/vite/issues/803)) ([34649b5](https://github.com/vitejs/vite/commit/34649b5fc3b8bef2e51e4fc0dc173a29df4a3b63)), closes [#795](https://github.com/vitejs/vite/issues/795) -* **build:** inject css to dynamic chunk only if it is not empty ([#805](https://github.com/vitejs/vite/issues/805)) ([038a053](https://github.com/vitejs/vite/commit/038a053477029d799b57f0d3242005a951486a61)) -* **build:** normalize `vueTransformAssetUrls` if not pass through plugins ([#668](https://github.com/vitejs/vite/issues/668)) ([47eb448](https://github.com/vitejs/vite/commit/47eb448709fa09f8bd02e1d4159d68e467ed68a7)), closes [#661](https://github.com/vitejs/vite/issues/661) -* **build:** only extract js module script tag in html ([#724](https://github.com/vitejs/vite/issues/724)) ([ef60d55](https://github.com/vitejs/vite/commit/ef60d55b67cf25508fe28a0c6cd2b9745b7f282a)), closes [#670](https://github.com/vitejs/vite/issues/670) -* **build:** resolve external url ([#807](https://github.com/vitejs/vite/issues/807)) ([df2e388](https://github.com/vitejs/vite/commit/df2e3884ee65dfc717b3c24d06da074c3fa9bca3)), closes [#799](https://github.com/vitejs/vite/issues/799) -* **build:** stop spinner on rollup error ([#835](https://github.com/vitejs/vite/issues/835)) ([78489b8](https://github.com/vitejs/vite/commit/78489b87c4b95ff8db86679b2f4a379591c0affa)) -* **config:** typo ([#935](https://github.com/vitejs/vite/issues/935)) ([08213b4](https://github.com/vitejs/vite/commit/08213b44ad79b8fc9b754115e416597326af5696)) -* **dev:** correctly normalize entry path on windows ([#736](https://github.com/vitejs/vite/issues/736)) ([49689e5](https://github.com/vitejs/vite/commit/49689e5d9ccb1e119951951e773d8826ec2221be)), closes [#735](https://github.com/vitejs/vite/issues/735) -* **dev:** decode for `publicPath` ([#924](https://github.com/vitejs/vite/issues/924)) ([0ea245c](https://github.com/vitejs/vite/commit/0ea245c69ec9c7baef7b755e497e15e171695859)), closes [#920](https://github.com/vitejs/vite/issues/920) -* **dev:** don't rewrite files inside public ([#602](https://github.com/vitejs/vite/issues/602)) ([2b544f3](https://github.com/vitejs/vite/commit/2b544f31bf8526b9f5ddee865c6c086f3edce756)) -* **dev:** hand file write end when change event emit in chokidar ([#824](https://github.com/vitejs/vite/issues/824)) ([a8f9595](https://github.com/vitejs/vite/commit/a8f95952650df7507c959478f2fa7048e6b7657b)), closes [#610](https://github.com/vitejs/vite/issues/610) -* **dev:** ignore .git file with hmr ([#664](https://github.com/vitejs/vite/issues/664)) ([c9a2764](https://github.com/vitejs/vite/commit/c9a27643f4ca612c8280c4485a6feadbc973c1ca)), closes [#663](https://github.com/vitejs/vite/issues/663) -* **dev:** strip utf-8 bom ([#814](https://github.com/vitejs/vite/issues/814)) ([ed2afe6](https://github.com/vitejs/vite/commit/ed2afe61c90847fba0191ce8633b41ecde20c73b)) -* **docs:** typo ([#843](https://github.com/vitejs/vite/issues/843)) ([2893a41](https://github.com/vitejs/vite/commit/2893a4149bbf2baf8a895a12ee6548148481a7bf)) -* add `@rollup/plugin-commonjs` before user plugin, let it correct… ([#746](https://github.com/vitejs/vite/issues/746)) ([f005c67](https://github.com/vitejs/vite/commit/f005c67f9865c8ec14a1c752d98962beb9decef5)), closes [#728](https://github.com/vitejs/vite/issues/728) -* avoid overwriting the prorcess global ([#609](https://github.com/vitejs/vite/issues/609)) ([36422c2](https://github.com/vitejs/vite/commit/36422c2d5e0e0e59ef969d0b5287d98bfe7cc3ee)) -* bump `rollup-plugin-terser` + update `esbuild` target to `es2020… ([#723](https://github.com/vitejs/vite/issues/723)) ([5266b74](https://github.com/vitejs/vite/commit/5266b74218a7a080e5b0eeb63383543a932dd5de)), closes [#718](https://github.com/vitejs/vite/issues/718) -* don't mutate plugins array in postcss config ([#791](https://github.com/vitejs/vite/issues/791)) ([3328076](https://github.com/vitejs/vite/commit/3328076261a8bdded73a25c73b509f140cc1ab6e)) -* notModified with transform ([#682](https://github.com/vitejs/vite/issues/682)) ([c6426e9](https://github.com/vitejs/vite/commit/c6426e9f5ae33fdde7ef6093a02960ca0374cecd)), closes [#662](https://github.com/vitejs/vite/issues/662) -* **dev:** omit "?t=" query from esbuild sourcemap source path ([#783](https://github.com/vitejs/vite/issues/783)) ([ec295aa](https://github.com/vitejs/vite/commit/ec295aaf75b48b554cd0aa339b99a8d4b4ec1a47)) -* **dev:** warn unknown dynamic import inside module rewrite ([#776](https://github.com/vitejs/vite/issues/776)) ([304f321](https://github.com/vitejs/vite/commit/304f321c6160ea8c97acb0b6ee1f6022ac873431)), closes [#772](https://github.com/vitejs/vite/issues/772) -* make vite.config support es2020 syntax ([#658](https://github.com/vitejs/vite/issues/658)) ([760cbac](https://github.com/vitejs/vite/commit/760cbacc963e4df37779ff49c8c14f68487dea81)) -* README.md type/grammar ([#625](https://github.com/vitejs/vite/issues/625)) ([2560a45](https://github.com/vitejs/vite/commit/2560a45897e5c608056743352a9dc90cf5ec0877)) -* strip "public/" prefix in `defaultFileToRequest` ([#681](https://github.com/vitejs/vite/issues/681)) ([5d98994](https://github.com/vitejs/vite/commit/5d98994d2c0fb790458a30d4badb7bf83c48691f)) -* use `index.js` as default entry point ([#665](https://github.com/vitejs/vite/issues/665)) ([5969c97](https://github.com/vitejs/vite/commit/5969c97ab5d0da56be72083d88b583db109fd3d3)) -* **dev:** Support passing "0" as port ([#590](https://github.com/vitejs/vite/issues/590)) ([ba9dda2](https://github.com/vitejs/vite/commit/ba9dda22ca89118f39fbbad7afb79c1898892e63)) -* **hmr:** correct hmr for sfc has setup script when it template change ([#763](https://github.com/vitejs/vite/issues/763)) ([9bea946](https://github.com/vitejs/vite/commit/9bea946397e2f63d1580e3f2c6410495f6e05e19)), closes [#748](https://github.com/vitejs/vite/issues/748) - - -### Features - -* **dev:** add hmr config for websocket connection ([#677](https://github.com/vitejs/vite/issues/677)) ([b753478](https://github.com/vitejs/vite/commit/b753478dfe96bd318b39552781e480ea068b6ead)) -* **dev:** proxy ws ([#865](https://github.com/vitejs/vite/issues/865)) ([c3ef4f6](https://github.com/vitejs/vite/commit/c3ef4f64ec09c6916f4e6b9764362a23843b98b6)), closes [#864](https://github.com/vitejs/vite/issues/864) -* set NODE_ENV if not present ([#732](https://github.com/vitejs/vite/issues/732)) ([0455b91](https://github.com/vitejs/vite/commit/0455b9191b9e497a80de6c11190d863e4e4c636a)), closes [#696](https://github.com/vitejs/vite/issues/696) -* suppot CSS modules named exports ([#750](https://github.com/vitejs/vite/issues/750)) ([d2ac431](https://github.com/vitejs/vite/commit/d2ac431e03a9eb91bd819b37100493edd4949530)) -* **build:** add option for `terser` ([#734](https://github.com/vitejs/vite/issues/734)) ([fb85cb2](https://github.com/vitejs/vite/commit/fb85cb2a75dd49bfe6df1a8a1038411b3744a4a2)), closes [#733](https://github.com/vitejs/vite/issues/733) -* **build:** use `fs.emptyDir` instead of `fs.remove` ([#744](https://github.com/vitejs/vite/issues/744)) ([e52e5ed](https://github.com/vitejs/vite/commit/e52e5ed1c5cf74c34cf6a35b7c1d507a3ce66373)), closes [#709](https://github.com/vitejs/vite/issues/709) - - -### Performance Improvements - -* improve regex performance ([#834](https://github.com/vitejs/vite/issues/834)) ([96531fc](https://github.com/vitejs/vite/commit/96531fc859c2f83a5ef66d36fc18f67528e600a6)) - - - -# [1.0.0-rc.4](https://github.com/vuejs/vite/compare/v1.0.0-rc.3...v1.0.0-rc.4) (2020-07-30) - - -### Bug Fixes - -* **hmr:** module rewrite should not cache hmr requests ([e386575](https://github.com/vuejs/vite/commit/e3865756bfb26065b0866be91d03d4b06e4e86dc)), closes [#603](https://github.com/vuejs/vite/issues/603) [#598](https://github.com/vuejs/vite/issues/598) -* support options for template block preprocessor render ([#641](https://github.com/vuejs/vite/issues/641)) ([540ae24](https://github.com/vuejs/vite/commit/540ae24b0d645a4f20bd71037edd716690452ce0)), closes [#634](https://github.com/vuejs/vite/issues/634) -* **build/css:** ensure consistent build css hash ([4fba48b](https://github.com/vuejs/vite/commit/4fba48be081e1d336368812ab23c9d5a74b98c06)), closes [#596](https://github.com/vuejs/vite/issues/596) -* **dev:** don't unregister user service worker ([#622](https://github.com/vuejs/vite/issues/622)) ([ab5d6f6](https://github.com/vuejs/vite/commit/ab5d6f6864f059ea88b5328f97bfdaa4b5146c6a)), closes [#615](https://github.com/vuejs/vite/issues/615) -* **dev:** fix path with query + ignore `?import` query with hmr ([#619](https://github.com/vuejs/vite/issues/619)) ([dd92f4f](https://github.com/vuejs/vite/commit/dd92f4f910553f8d8aaab0e587cb7788e643a24d)), closes [#617](https://github.com/vuejs/vite/issues/617) -* **dev:** use `path` + `content` as rewrite cache key ([#631](https://github.com/vuejs/vite/issues/631)) ([60c7424](https://github.com/vuejs/vite/commit/60c7424f101d52b4542f75c0c9fac1f617097dcd)), closes [#627](https://github.com/vuejs/vite/issues/627) -* handle ` - ``` - - - -# [1.0.0-rc.1](https://github.com/vuejs/vite/compare/v1.0.0-beta.12...v1.0.0-rc.1) (2020-07-17) - - - -# [1.0.0-beta.12](https://github.com/vuejs/vite/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2020-07-16) - - -### Bug Fixes - -* **build:** external base url ([#515](https://github.com/vuejs/vite/issues/515)) ([b16548f](https://github.com/vuejs/vite/commit/b16548fde61f5192f3a9153d99c3785a623e8a12)), closes [#507](https://github.com/vuejs/vite/issues/507) -* **build:** link href used data url ([#516](https://github.com/vuejs/vite/issues/516)) ([8ae073e](https://github.com/vuejs/vite/commit/8ae073e59c77a092cbe505415f59a76e1cadffd4)), closes [#508](https://github.com/vuejs/vite/issues/508) -* **config:** merge array values in rollup config options ([abfe6f8](https://github.com/vuejs/vite/commit/abfe6f8732b057b256f152e71e2e450861636e30)), closes [#526](https://github.com/vuejs/vite/issues/526) -* **css:** fix lazy loaded css injection (fix [#530](https://github.com/vuejs/vite/issues/530)) ([a502399](https://github.com/vuejs/vite/commit/a50239988e57958c7e56e10bb7f24b4e5c8ed234)) -* **optimize:** resolve bare assets import inside node module ([#552](https://github.com/vuejs/vite/issues/552)) ([5801f66](https://github.com/vuejs/vite/commit/5801f6687d4e546ca70b1afbfe80569d90cca072)), closes [#551](https://github.com/vuejs/vite/issues/551) -* **resolve:** properly resolve optimized deps with name ending in .js ([c953f0d](https://github.com/vuejs/vite/commit/c953f0dacc97a557ac79ad73a8a69cd0c72c95b0)), closes [#540](https://github.com/vuejs/vite/issues/540) -* **transform:** keep path/id on transform context consistent between dev/build ([#519](https://github.com/vuejs/vite/issues/519)) ([6388e69](https://github.com/vuejs/vite/commit/6388e699617f7c72e753f9d961278b46a468da60)), closes [#518](https://github.com/vuejs/vite/issues/518) -* change `esbuild` compiler target to `es2020` + bump esbuild + bu… ([#525](https://github.com/vuejs/vite/issues/525)) ([893eeff](https://github.com/vuejs/vite/commit/893eeff4f6ef2134bd75f4e8623347ceab7ce229)), closes [#503](https://github.com/vuejs/vite/issues/503) -* fallback to http1 when proxy is required ([02cc24f](https://github.com/vuejs/vite/commit/02cc24f5e7c3219eb0dd77480f9df8208e81c09c)), closes [#484](https://github.com/vuejs/vite/issues/484) -* fix resolve optimize module + cache hit ([#500](https://github.com/vuejs/vite/issues/500)) ([3766767](https://github.com/vuejs/vite/commit/37667678e462748162d74d0107e619e837bf783c)), closes [#490](https://github.com/vuejs/vite/issues/490) -* inject web worker rollup plugin before node-resolve ([458a4bb](https://github.com/vuejs/vite/commit/458a4bbcb578d79041a91ea364ca53a6053d3ebf)) - - -### Features - -* **build:** add option for disable `rollup-plugin-vue` ([#517](https://github.com/vuejs/vite/issues/517)) ([5d06b0c](https://github.com/vuejs/vite/commit/5d06b0c018259a6ee2a2e0ae75f49951934cf8c1)) -* **transform:** expose notModified flag in transform context ([#510](https://github.com/vuejs/vite/issues/510)) ([2da41f1](https://github.com/vuejs/vite/commit/2da41f1011cc6f33fc8ee4dc279dcbb9214f0bca)) -* ` + + ``` diff --git a/docs/guide/build.md b/docs/guide/build.md index a2fa5d92d2066f..3205d71acb0392 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -21,9 +21,9 @@ Legacy browsers can be supported via [@vitejs/plugin-legacy](https://github.com/ ## Public Base Path -- Related: [Asset Handling](./features#asset-handling) +- Related: [Asset Handling](./assets) -If you are deploying your project under a nested public path, simply specify the [`build.base` config option](/config/#build-base) and all asset paths will be rewritten accordingly. This option can also be specified as a command line flag, e.g. `vite build --base=/my/public/path/`. +If you are deploying your project under a nested public path, simply specify the [`base` config option](/config/#base) and all asset paths will be rewritten accordingly. This option can also be specified as a command line flag, e.g. `vite build --base=/my/public/path/`. JS-imported asset URLs, CSS `url()` references, and asset references in your `.html` files are all automatically adjusted to respect this option during build. @@ -84,7 +84,7 @@ module.exports = { When you are developing a browser-oriented library, you are likely spending most of the time on a test/demo page that imports your actual library. With Vite, you can use your `index.html` for that purpose to get the smooth development experience. -When it is time to bundle your library for distribution, use the [`build.lib` config option](/config/#build-lib): +When it is time to bundle your library for distribution, use the [`build.lib` config option](/config/#build-lib). Make sure to also externalize any dependencies that you do not want to bundle into your library, e.g. `vue` or `react`: ```js // vite.config.js @@ -95,6 +95,18 @@ module.exports = { lib: { entry: path.resolve(__dirname, 'lib/main.js'), name: 'MyLib' + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ['vue'], + output: { + // Provide global variables to use in the UMD build + // for externalized deps + globals: { + vue: 'Vue' + } + } } } } @@ -117,6 +129,11 @@ Recommended `package.json` for your lib: "files": ["dist"], "main": "./dist/my-lib.umd.js", "module": "./dist/my-lib.es.js", - "exports": "./dist/my-lib.es.js" + "exports": { + ".": { + "import": "./dist/my-lib.es.js", + "require": "./dist/my-lib.umd.js" + } + } } ``` diff --git a/docs/guide/comparisons.md b/docs/guide/comparisons.md index faced6b15e5ff7..f68319696a986e 100644 --- a/docs/guide/comparisons.md +++ b/docs/guide/comparisons.md @@ -4,11 +4,32 @@ [Snowpack](https://www.snowpack.dev/) is also a no-bundle native ESM dev server that is very similar in scope to Vite. Aside from different implementation details, the two projects share a lot in terms of technical advantages over traditional tooling. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Some of the main differences between the two projects are: -**Production Build Handling** +**Production Build** -Snowpack's default build output is unbundled: it transforms each file into separate built modules, which can then be fed into different "optimizers" that perform the actual bundling. The benefit of this is that you can choose between different end-bundlers (e.g. webpack, Rollup, or even ESbuild), the downside is that it's a bit of a fragmented experience - for example, the `esbuild` optimizer is still unstable, the Rollup optimizer is not officially maintained, and different optimizers have different output and configurations. +Snowpack's default build output is unbundled: it transforms each file into separate built modules, which can then be fed into different "optimizers" that perform the actual bundling. The benefit of this is that you can choose between different end-bundlers to fit specific needs (e.g. webpack, Rollup, or even esbuild), the downside is that it's a bit of a fragmented experience - for example, the esbuild optimizer is still unstable, the Rollup optimizer is not officially maintained, and different optimizers have different output and configurations. -Vite opts to have a deeper integration with one single bundler (Rollup) in order to provide a more streamlined experience. The reason for going with Rollup is because we believe for the foreseeable future, Rollup offers the best balance between maturity, extensibility, build speed, and output bundle size. Vite supports a [Universal Plugin API](./api-plugin) that extends Rollup's plugin interface, and offers more build features such as [multi-page support](./build#multi-page-app) and [library mode](./build#library-mode). +Vite opts to have a deeper integration with one single bundler (Rollup) in order to provide a more streamlined experience. It also allows Vite to support a [Universal Plugin API](./api-plugin) that works for both dev and build. + +Due to a more integrated build process, Vite supports a wide range of features that are currently not available in Snowpack build optimizers: + +- [Multi-Page Support](./build#multi-page-app) +- [Library Mode](./build#library-mode) +- [Automatic CSS code-splitting](./features#css-code-splitting) +- [Optimized async chunk loading](./features#async-chunk-loading-optimization) +- [Automatic dynamic import polyfill](./features#dynamic-import-polyfill) +- Official [legacy mode plugin](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) that generates dual modern/legacy bundles and auto delivers the right bundle based on browser support. + +**Faster Dependency Pre-Bundling** + +Vite uses [esbuild](https://esbuild.github.io/) instead of Rollup for dependency pre-bundling. This results in significant performance improvements in terms of cold server start and re-bundling on dependency invalidations. + +**Monorepo Support** + +Vite is designed to handle monorepo setups and we have users successfully using it with Yarn, Yarn 2, and PNPM based monorepos. + +**CSS Pre-Processor Support** + +Vite provides more refined support for Sass and Less, including improved `@import` resolution (aliases and npm dependencies) and [automatic `url()` rebasing for inlined files](./features#import-inlining-and-rebasing). **First Class Vue Support** @@ -24,6 +45,6 @@ WMR is mainly designed for [Preact](https://preactjs.com/) projects, and offers [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) (previously `es-dev-server`) is a great project and Vite 1.0's Koa-based server setup was inspired by it. -`@web/dev-server` is a bit lower-level in terms of scope. It does not provide out-of-the-box framework integrations, and requires manually setting up a Rollup configuration for the production build. However, its parent project does provide a collection of excellent Rollup plugins. +`@web/dev-server` is a bit lower-level in terms of scope. It does not provide official framework integrations, and requires manually setting up a Rollup configuration for the production build. -Overall, Vite is a more opinionated / higher-level tool that aims to provide a more streamlined workflow compared to `@web/dev-server`. That said, the `@web` umbrella project contains many other excellent tools that may benefit Vite users as well. \ No newline at end of file +Overall, Vite is a more opinionated / higher-level tool that aims to provide a more out-of-the-box workflow. That said, the `@web` umbrella project contains many other excellent tools that may benefit Vite users as well. diff --git a/docs/guide/dep-pre-bundling.md b/docs/guide/dep-pre-bundling.md index 7da80e4c1782df..e5fc5173ccdf3c 100644 --- a/docs/guide/dep-pre-bundling.md +++ b/docs/guide/dep-pre-bundling.md @@ -13,7 +13,7 @@ Pre-bundling them to speed up dev server page load... This is Vite performing what we call "dependency pre-bundling". This process serves two purposes: -1. **CommonJS and UMD comaptibility:** During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first. +1. **CommonJS and UMD compatibility:** During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first. When converting CommonJS dependencies, Vite performs smart import analysis so that named imports to CommonJS modules will work as expected even if the exports are dynamically assigned (e.g. React): @@ -24,39 +24,15 @@ This is Vite performing what we call "dependency pre-bundling". This process ser 2. **Performance:** Vite converts ESM dependencies with many internal modules into a single module to improve subsequent page load performance. - Some packages ship their ES modules builds as many separate files importing one another. For example, [`lodash-es` has over 600 internal modules](https://unpkg.com/browse/lodash-es/)! When we do `import { debounce } from 'lodash-es`, the browser fires off 600+ HTTP requests at the same time! Even though the server has no problem handling them, the large amount of requests create a network congestion on the browser side, causing the page the load quite a bit slower. + Some packages ship their ES modules builds as many separate files importing one another. For example, [`lodash-es` has over 600 internal modules](https://unpkg.com/browse/lodash-es/)! When we do `import { debounce } from 'lodash-es'`, the browser fires off 600+ HTTP requests at the same time! Even though the server has no problem handling them, the large amount of requests create a network congestion on the browser side, causing the page to load noticeably slower. By pre-bundling `lodash-es` into a single module, we now only need one HTTP request instead! -## Pre-Bundle Criteria +## Automatic Dependency Discovery -Dependencies are only checked for pre-bundling if it is listed in `dependencies` of your `package.json`. It will be eligible for pre-bundling if one of the following is true: +If an existing cache is not found, Vite will crawl your source code and automatically discover dependency imports (i.e. "bare imports" that expect to be resolved from `node_modules`) and use these found imports as entry points for the pre-bundle. The pre-bundling is performed with `esbuild` so it's typically very fast. -- The dependency's entry contains no valid ES module export (treated as CommonJS); -- The dependency's entry contains ES imports to other modules or dependencies (multiple internal modules). - -This also means you should avoid placing dependencies that are not meant to be imported in your source code under `dependencies` (move them to `devDependencies` instead). - -## Deep Imports - -Pre-bundled dependencies are bundled into a single, separate module, therefore you should prefer using named exports from the main entry point instead of deep imports to individual modules. For example: - -```js -// Bad, will lead to duplicated module instances. -// Vite will complain about it. -import debounce from 'lodash-es/debounce' - -// Good -import { debounce } from 'lodash-es' -``` - -Some dependencies may be designed to be used via deep imports, e.g. `firebase` exposes sub modules via `firebase/*` deep imports. For such dependencies, you can instruct Vite to explicitly include these deep import paths via the [`optimizeDeps.include` option](http://localhost:3000/config/#optimizedeps-include). If you never use the main entry, it is also a good idea to exclude it from pre-bundling. - -## Dependency Compatibility - -While Vite tries its best to accomodate non-ESM dependencies, there are going to be some dependencies that won't work out of the box. The most common types are those that imports Node.js built-in modules (e.g. `os` or `path`) and expects the bundler to automatically shim them. These packages are typically written assuming all users will be consuming it with `webpack`, but such usage does not make sense when targeting browser environments. - -When using Vite, it is strongly recommended to always prefer dependencies that provide ESM formats. This will make your build faster, and results in smaller production bundles due to more efficient tree-shaking. +After the server has already started, if a new dependency import is encountered that isn't already in the cache, Vite will re-run the dep bundling process and reload the page. ## Monorepos and Linked Dependencies @@ -64,16 +40,30 @@ In a monorepo setup, a dependency may be a linked package from the same repo. Vi ## Customizing the Behavior -The default pre-bundling heuristics may not always be desirable. In cases where you want to explicitly include/exclude dependencies from the list, use the [`optimizeDeps` config options](/config/#dep-optimization-options). +The default dependency discovery heuristics may not always be desirable. In cases where you want to explicitly include/exclude dependencies from the list, use the [`optimizeDeps` config options](/config/#dep-optimization-options). + +A typical use case for `optimizeDeps.include` or `optimizeDeps.exclude` is when you have an import that is not directly discoverable in the source code. For example, maybe the import is created as a result of a plugin transform. This means Vite won't be able to discover the import on the initial scan - it can only discover it after the file is requested by the browser and transformed. This will cause the server to immediately re-bundle after server start. + +Both `include` and `exclude` can be used to deal with this. If the dependency is large (with many internal modules) or is CommonJS, then you should include it; If the dependency is small and is already valid ESM, you can exclude it and let the browser load it directly. ## Caching +### File System Cache + Vite caches the pre-bundled dependencies in `node_modules/.vite`. It determines whether it needs to re-run the pre-bundling step based on a few sources: - The `dependencies` list in your `package.json` - Package manager lockfiles, e.g. `package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`. -- Your `vite.config.js`, if present. +- Relevant fields in your `vite.config.js`, if present. The pre-bundling step will only need to be re-run when one of the above has changed. If for some reason you want to force Vite to re-bundle deps, you can either start the dev server with the `--force` command line option, or manually delete the `node_modules/.vite` cache directory. + +### Browser Cache + +Resolved dependency requests are strongly cached with HTTP headers `max-age=31536000,immutable` to improve page reload performance during dev. Once cached, these requests will never hit the dev server again. They are auto invalidated by the appended version query if a different version is installed (as reflected in your package manager lockfile). If you want to debug your dependencies by making local edits, you can: + +1. Temporarily disable cache via the Network tab of your browser devtools; +2. Restart Vite dev server with the `--force` flag to re-bundle the deps; +3. Reload the page. diff --git a/docs/guide/env-and-mode.md b/docs/guide/env-and-mode.md index ab5db2b317e1a3..9180e552cc0637 100644 --- a/docs/guide/env-and-mode.md +++ b/docs/guide/env-and-mode.md @@ -6,7 +6,7 @@ Vite exposes env variables on the special **`import.meta.env`** object. Some bui - **`import.meta.env.MODE`**: {string} the [mode](#modes) the app is running in. -- **`import.meta.env.BASE_URL`**: {string} the base url the app is being served from. In development, this is always `/`. In production, this is determined by the [`build.base` config option](/config/#build-base). +- **`import.meta.env.BASE_URL`**: {string} the base url the app is being served from. This is determined by the [`base` config option](/config/#base). - **`import.meta.env.PROD`**: {boolean} whether the app is running in production. @@ -14,7 +14,7 @@ Vite exposes env variables on the special **`import.meta.env`** object. Some bui ### Production Replacement -During production, these env variables are **statically replaced**. It therefore necessary to always reference them using the full static string. For example, dynamic key access like `import.meta.env[key]` will not work. +During production, these env variables are **statically replaced**. It is therefore necessary to always reference them using the full static string. For example, dynamic key access like `import.meta.env[key]` will not work. It will also replace these strings appearing in JavaScript strings and Vue templates. This should be a rare case, but it can be unintended. There are ways to work around this behavior: diff --git a/docs/guide/features.md b/docs/guide/features.md index 103e335cff26ba..c0bc5d32004223 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -1,14 +1,8 @@ # Features -At the very basic level, developing using Vite is not that much different from using a static file server. However, Vite provides many enhancements over native ESM imports to support +At the very basic level, developing using Vite is not that much different from using a static file server. However, Vite provides many enhancements over native ESM imports to support various features that are typically seen in bundler-based setups. -## Hot Module Replacement - -Vite provides an [HMR API](./api-hmr) over native ESM. Frameworks with HMR capabilities can leverage the API to provide instant, precise updates without reloading the page or blowing away application state. Vite provides first-party HMR integrations for [Vue Single File Components](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) and [React Fast Refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh). There are also official integrations for Preact via [@prefresh/vite](https://github.com/JoviDeCroock/prefresh/tree/main/packages/vite). - -Note you don't need to manually set these up - when you [create an app via `@vitejs/create-app`](./), the selected templates would have these pre-configured for you already. - -## NPM Dependency Resolving +## NPM Dependency Resolving and Pre-Bundling Native ES imports do not support bare module imports like the following: @@ -16,11 +10,21 @@ Native ES imports do not support bare module imports like the following: import { someMethod } from 'my-dep' ``` -The above will throw an error in the browser. Vite detects such bare module imports in all served `.js` files and rewrites them to resolved paths like `/node_modules/my-dep/dist/my-dep.js?v=1.0.0` so that the browser can handle them properly. +The above will throw an error in the browser. Vite will detect such bare module imports in all served source files and perform the following: + +1. [Pre-bundle](./dep-pre-bundling) them to improve page loading speed and convert CommonJS / UMD modules to ESM. The pre-bundling step is performed with [esbuild](http://esbuild.github.io/) and makes Vite's cold start time significantly faster than any JavaScript-based bundler. -**Dependency Caching** +2. Rewrite the imports to valid URLs like `/node_modules/.vite/my-dep.js?v=f3sf2ebd` so that the browser can import them properly. -Resolved dependency requests are strongly cached with headers `max-age=31536000,immutable` to improve page reload performance during dev. Once cached, these requests will never hit the dev server again. They are auto invalidated by the appended version query if a different version is installed. If you made manual local edits to your dependencies, you can temporarily disable cache via your browser devtools and reload the page. +**Dependencies are Strongly Cached** + +Vite caches dependency requests via HTTP headers, so if you wish to locally edit/debug a dependency, follow the steps [here](./dep-pre-bundling#browser-cache). + +## Hot Module Replacement + +Vite provides an [HMR API](./api-hmr) over native ESM. Frameworks with HMR capabilities can leverage the API to provide instant, precise updates without reloading the page or blowing away application state. Vite provides first-party HMR integrations for [Vue Single File Components](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) and [React Fast Refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh). There are also official integrations for Preact via [@prefresh/vite](https://github.com/JoviDeCroock/prefresh/tree/main/packages/vite). + +Note you don't need to manually set these up - when you [create an app via `@vitejs/create-app`](./), the selected templates would have these pre-configured for you already. ## TypeScript @@ -93,6 +97,12 @@ export default { Importing `.css` files will inject its content to the page via a ` \ No newline at end of file + +label { + margin: 0 0.5em; + font-weight: bold; +} + +code { + background-color: #eee; + padding: 2px 4px; + border-radius: 4px; + color: #304455; +} + diff --git a/packages/create-app/template-vue-ts/src/shims-vue.d.ts b/packages/create-app/template-vue-ts/src/shims-vue.d.ts new file mode 100644 index 00000000000000..ac1ded792334c2 --- /dev/null +++ b/packages/create-app/template-vue-ts/src/shims-vue.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/packages/create-app/template-vue-ts/tsconfig.json b/packages/create-app/template-vue-ts/tsconfig.json index 8c7115f961a575..e754e65292f1a0 100644 --- a/packages/create-app/template-vue-ts/tsconfig.json +++ b/packages/create-app/template-vue-ts/tsconfig.json @@ -6,9 +6,10 @@ "strict": true, "jsx": "preserve", "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, "lib": ["esnext", "dom"], - "types": ["vite/client"], - "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }] + "types": ["vite/client"] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } diff --git a/packages/create-app/template-vue-ts/vite.config.ts b/packages/create-app/template-vue-ts/vite.config.ts index 2e3d2576fc2e28..315212d69a7ba5 100644 --- a/packages/create-app/template-vue-ts/vite.config.ts +++ b/packages/create-app/template-vue-ts/vite.config.ts @@ -1,6 +1,7 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +// https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()] }) diff --git a/packages/create-app/template-vue/index.html b/packages/create-app/template-vue/index.html index d49c18c6fb142f..030a6ff51bfc6f 100644 --- a/packages/create-app/template-vue/index.html +++ b/packages/create-app/template-vue/index.html @@ -1,13 +1,13 @@ -
- - - -import.meta.env.BASE_URL:
import.meta.env.MODE:
import.meta.env.DEV:
import.meta.env.PROD:
import.meta.env.VITE_CUSTOM_ENV_VARIABLE:
- import.meta.env.BASE_URL:
-
- import.meta.env.MODE:
-
- import.meta.env.DEV:
-
- import.meta.env.PROD:
-
- import.meta.env.VITE_CUSTOM_ENV_VARIABLE:
-
- import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME:
-
- import.meta.env.VITE_INLINE:
-
- process.env.NODE_ENV:
-
- import.meta.env:
+ import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME:
+import.meta.env.VITE_INLINE:
process.env.NODE_ENV:
import.meta.env:
-function text(el, text) { - document.querySelector(el).textContent = text -} - \ No newline at end of file + diff --git a/packages/playground/env/package.json b/packages/playground/env/package.json index 2ced20d5275744..efb93c23954582 100644 --- a/packages/playground/env/package.json +++ b/packages/playground/env/package.json @@ -5,7 +5,8 @@ "scripts": { "dev": "cross-env VITE_INLINE=inline-serve vite", "build": "cross-env VITE_INLINE=inline-build vite build", - "debug": "node --inspect-brk ../../vite/bin/vite" + "debug": "node --inspect-brk ../../vite/bin/vite", + "serve": "vite preview" }, "devDependencies": { "cross-env": "^7.0.3" diff --git a/packages/playground/glob-import/__tests__/glob-import.spec.ts b/packages/playground/glob-import/__tests__/glob-import.spec.ts index f4e37ec46b7d0f..15ffb4c7d97ede 100644 --- a/packages/playground/glob-import/__tests__/glob-import.spec.ts +++ b/packages/playground/glob-import/__tests__/glob-import.spec.ts @@ -1,4 +1,10 @@ -import { isBuild } from '../../testUtils' +import { + addFile, + editFile, + isBuild, + removeFile, + untilUpdated +} from '../../testUtils' const filteredResult = { './foo.js': { @@ -24,14 +30,14 @@ const json = isBuild const allResult = { // JSON file should be properly transformed - './dir/baz.json': json, - './dir/foo.js': { + '/dir/baz.json': json, + '/dir/foo.js': { msg: 'foo' }, - './dir/index.js': { + '/dir/index.js': { modules: filteredResult }, - './dir/nested/bar.js': { + '/dir/nested/bar.js': { modules: { '../baz.json': json }, @@ -44,3 +50,42 @@ test('should work', async () => { JSON.stringify(allResult, null, 2) ) }) + +if (!isBuild) { + test('hmr for adding/removing files', async () => { + addFile('dir/a.js', '') + await untilUpdated( + () => page.textContent('.result'), + JSON.stringify( + { + '/dir/a.js': {}, + ...allResult + }, + null, + 2 + ) + ) + + // edit the added file + editFile('dir/a.js', () => 'export const msg ="a"') + await untilUpdated( + () => page.textContent('.result'), + JSON.stringify( + { + '/dir/a.js': { + msg: 'a' + }, + ...allResult + }, + null, + 2 + ) + ) + + removeFile('dir/a.js') + await untilUpdated( + () => page.textContent('.result'), + JSON.stringify(allResult, null, 2) + ) + }) +} diff --git a/packages/playground/glob-import/index.html b/packages/playground/glob-import/index.html index 541898db833426..b38a194e21b4f2 100644 --- a/packages/playground/glob-import/index.html +++ b/packages/playground/glob-import/index.html @@ -2,7 +2,7 @@ +