fix(plugin-legacy): wrap chunks in IIFE (vitejs#3783)

javastation · Jun 22, 2021 · 7988e88 · 7988e88
1 parent ac2506d
commit 7988e88
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/packages/playground/legacy/__tests__/legacy.spec.ts b/packages/playground/legacy/__tests__/legacy.spec.ts
@@ -12,3 +12,9 @@ test('import.meta.env.LEGACY', async () => {
 test('transpiles down iterators correctly', async () => {
   expect(await page.textContent('#iterators')).toMatch('hello')
 })
+
+test('wraps with iife', async () => {
+  expect(await page.textContent('#babel-helpers')).toMatch(
+    'exposed babel helpers: false'
+  )
+})
diff --git a/packages/playground/legacy/index.html b/packages/playground/legacy/index.html
@@ -1,4 +1,5 @@
 <h1 id="app"></h1>
 <div id="env"></div>
 <div id="iterators"></div>
+<div id="babel-helpers"></div>
 <script type="module" src="./main.js"></script>
diff --git a/packages/playground/legacy/main.js b/packages/playground/legacy/main.js
@@ -21,3 +21,10 @@ document.getElementById('env').textContent = `is legacy: ${isLegacy}`
 document.getElementById('iterators').textContent = [...new Set(['hello'])].join(
   ''
 )
+
+// babel-helpers
+
+document.getElementById('babel-helpers').textContent =
+  // Using `String.raw` to inject `@babel/plugin-transform-template-literals`
+  // helpers.
+  String.raw`exposed babel helpers: ${window._templateObject != null}`
diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js
@@ -276,7 +276,8 @@ function viteLegacyPlugin(options = {}) {
             () => ({
               plugins: [
                 recordAndRemovePolyfillBabelPlugin(legacyPolyfills),
-                replaceLegacyEnvBabelPlugin()
+                replaceLegacyEnvBabelPlugin(),
+                wrapIIFEBabelPlugin()
               ]
             })
           ],
@@ -600,6 +601,22 @@ function replaceLegacyEnvBabelPlugin() {
   })
 }
 
+function wrapIIFEBabelPlugin() {
+  return ({ types: t, template }) => {
+    const buildIIFE = template(';(function(){%%body%%})();')
+
+    return {
+      name: 'vite-wrap-iife',
+      post({ path }) {
+        if (!this.isWrapped) {
+          this.isWrapped = true
+          path.replaceWith(t.program(buildIIFE({ body: path.node.body })))
+        }
+      }
+    }
+  }
+}
+
 module.exports = viteLegacyPlugin
 
 viteLegacyPlugin.default = viteLegacyPlugin