From 8c34870040f8c2f4be7d00245a3683f9e64d894e Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 6 Jan 2021 20:46:47 -0500 Subject: [PATCH] feat(plugin-legacy): @vitejs/plugin-legacy --- docs/guide/build.md | 2 +- .../legacy/__tests__/legacy.spec.ts | 3 + packages/playground/legacy/async.js | 5 + packages/playground/legacy/index.html | 2 + packages/playground/legacy/main.js | 6 + packages/playground/legacy/package.json | 14 + packages/playground/legacy/vite.config.js | 28 + packages/playground/react/vite.config.js | 4 + packages/playground/vue-jsx/vite.config.js | 6 +- packages/playground/vue/vite.config.ts | 6 +- packages/plugin-legacy/README.md | 133 ++++ packages/plugin-legacy/index.d.ts | 28 + packages/plugin-legacy/index.js | 425 +++++++++++ packages/plugin-legacy/package.json | 33 + .../src/node/plugins/dynamicImportPolyfill.ts | 46 +- packages/vite/src/node/plugins/index.ts | 2 +- scripts/jestPerTestSetup.ts | 6 + yarn.lock | 711 +++++++++++++++++- 18 files changed, 1434 insertions(+), 26 deletions(-) create mode 100644 packages/playground/legacy/__tests__/legacy.spec.ts create mode 100644 packages/playground/legacy/async.js create mode 100644 packages/playground/legacy/index.html create mode 100644 packages/playground/legacy/main.js create mode 100644 packages/playground/legacy/package.json create mode 100644 packages/playground/legacy/vite.config.js create mode 100644 packages/plugin-legacy/README.md create mode 100644 packages/plugin-legacy/index.d.ts create mode 100644 packages/plugin-legacy/index.js create mode 100644 packages/plugin-legacy/package.json diff --git a/docs/guide/build.md b/docs/guide/build.md index db2cb315c79535..5adfc2e28a2937 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -15,7 +15,7 @@ A lightweight [dynamic import polyfill](https://github.com/GoogleChromeLabs/dyna You can specify custom targets via the [`build.target` config option](/config/#build-target), where the lowest target is `es2015`. -Note that Vite only handles syntax transforms and **does not cover polyfills**. You can check out [Polyfill.io](https://polyfill.io/v3/) to build custom polyfill bundles. +Note that Vite only handles syntax transforms and **does not cover polyfills by default**. You can check out [Polyfill.io](https://polyfill.io/v3/) or use[create-polyfill-service-url](https://www.npmjs.com/package/create-polyfill-service-url) to automatically generate polyfill bundles. Legacy browsers _can_ be supported via plugins that post-process the build output for compatibility (e.g. [`@rollup/plugin-babel`](https://github.com/rollup/plugins/tree/master/packages/babel) + [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) + [SystemJS](https://github.com/systemjs/systemjs)). This is not a built-in feature, but there is plan to provide an official plugin that automatically emits a separate legacy bundle. diff --git a/packages/playground/legacy/__tests__/legacy.spec.ts b/packages/playground/legacy/__tests__/legacy.spec.ts new file mode 100644 index 00000000000000..5ac67eb368105e --- /dev/null +++ b/packages/playground/legacy/__tests__/legacy.spec.ts @@ -0,0 +1,3 @@ +test('should work', async () => { + expect(await page.textContent('#app')).toMatch('Hello') +}) diff --git a/packages/playground/legacy/async.js b/packages/playground/legacy/async.js new file mode 100644 index 00000000000000..3d40084a974911 --- /dev/null +++ b/packages/playground/legacy/async.js @@ -0,0 +1,5 @@ +export function fn() { + const m = new Map() + m.set('foo', 'Hello') + document.querySelector('#app').textContent = m.get('foo') +} diff --git a/packages/playground/legacy/index.html b/packages/playground/legacy/index.html new file mode 100644 index 00000000000000..44e56f5663ecab --- /dev/null +++ b/packages/playground/legacy/index.html @@ -0,0 +1,2 @@ +

+ \ No newline at end of file diff --git a/packages/playground/legacy/main.js b/packages/playground/legacy/main.js new file mode 100644 index 00000000000000..973cd65966ad09 --- /dev/null +++ b/packages/playground/legacy/main.js @@ -0,0 +1,6 @@ +async function run() { + const { fn } = await import('./async.js') + fn() +} + +run() diff --git a/packages/playground/legacy/package.json b/packages/playground/legacy/package.json new file mode 100644 index 00000000000000..c0f4f90fa497b7 --- /dev/null +++ b/packages/playground/legacy/package.json @@ -0,0 +1,14 @@ +{ + "name": "test-legacy", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build --debug legacy", + "debug": "node --inspect-brk ../../vite/bin/vite" + }, + "devDependencies": { + "@vitejs/plugin-legacy": "^1.0.0" + }, + "dependencies": {} +} diff --git a/packages/playground/legacy/vite.config.js b/packages/playground/legacy/vite.config.js new file mode 100644 index 00000000000000..d4a5e4bd481b84 --- /dev/null +++ b/packages/playground/legacy/vite.config.js @@ -0,0 +1,28 @@ +const fs = require('fs') +const path = require('path') +const legacy = require('@vitejs/plugin-legacy').default + +module.exports = { + plugins: [ + legacy({ + targets: 'IE 11' + }) + ], + + build: { + // make tests faster + minify: false + }, + + // special test only hook + // for tests, remove `