fix #616: make js api minification optional

evanw · Jan 17, 2021 · 60013da · 60013da
1 parent 8235402
commit 60013da
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
     The change in the previous release to make calling `stop()` optional caused a regression for incremental rebuilds where calling `rebuild()` could potentially cause the process to exit early before the incremental rebuild is completed. This is because the implementation of `rebuild()` was missing a reference count to track that the service is now temporarily needed again. This omission was an oversight, and has now been fixed.
 
+* Provide minified and non-minified versions of in-browser API library ([#616](https://github.com/evanw/esbuild/issues/616))
+
+    The in-browser JavaScript API libraries for esbuild are in the [esbuild-wasm](https://www.npmjs.com/package/esbuild-wasm) package. There are two: `esbuild-wasm/lib/browser.js` in UMD format and `esbuild-wasm/esm/browser.js` in ESM format. Previously these were minified since they contain a large string of JavaScript that cannot be minified by other tools. Now they are no longer minified, and there are new minified versions available at `esbuild-wasm/lib/browser.min.js` and `esbuild-wasm/esm/browser.min.js`.
+
 ## 0.8.32
 
 * Calling `stop()` on the JavaScript API is now optional ([#656](https://github.com/evanw/esbuild/pull/656))

diff --git a/scripts/browser/browser-tests.js b/scripts/browser/browser-tests.js
@@ -5,7 +5,9 @@ const url = require('url')
 const fs = require('fs')
 
 const js = fs.readFileSync(path.join(__dirname, '..', '..', 'npm', 'esbuild-wasm', 'lib', 'browser.js'))
+const jsMin = fs.readFileSync(path.join(__dirname, '..', '..', 'npm', 'esbuild-wasm', 'lib', 'browser.min.js'))
 const esm = fs.readFileSync(path.join(__dirname, '..', '..', 'npm', 'esbuild-wasm', 'esm', 'browser.js'))
+const esmMin = fs.readFileSync(path.join(__dirname, '..', '..', 'npm', 'esbuild-wasm', 'esm', 'browser.min.js'))
 const wasm = fs.readFileSync(path.join(__dirname, '..', '..', 'npm', 'esbuild-wasm', 'esbuild.wasm'))
 
 // This is converted to a string and run inside the browser
@@ -130,6 +132,21 @@ let pages = {
       }
     </script>
   `,
+  iifeMin: `
+    <script src="/lib/esbuild.min.js"></script>
+    <script>
+      testStart = function() {
+        esbuild.startService({ wasmURL: '/esbuild.wasm' }).then(service => {
+          return (${runAllTests})({ esbuild, service })
+        }).then(() => {
+          testDone()
+        }).catch(e => {
+          testFail('' + (e && e.stack || e))
+          testDone()
+        })
+      }
+    </script>
+  `,
   esm: `
     <script type="module">
       import * as esbuild from '/esm/esbuild.js'
@@ -145,6 +162,21 @@ let pages = {
       }
     </script>
   `,
+  esmMin: `
+    <script type="module">
+      import * as esbuild from '/esm/esbuild.min.js'
+      window.testStart = function() {
+        esbuild.startService({ wasmURL: '/esbuild.wasm' }).then(service => {
+          return (${runAllTests})({ esbuild, service })
+        }).then(() => {
+          testDone()
+        }).catch(e => {
+          testFail('' + (e && e.stack || e))
+          testDone()
+        })
+      }
+    </script>
+  `,
 }
 
 const server = http.createServer((req, res) => {
@@ -155,12 +187,24 @@ const server = http.createServer((req, res) => {
       return
     }
 
+    if (req.url === '/lib/esbuild.min.js') {
+      res.writeHead(200, { 'Content-Type': 'application/javascript' })
+      res.end(jsMin)
+      return
+    }
+
     if (req.url === '/esm/esbuild.js') {
       res.writeHead(200, { 'Content-Type': 'application/javascript' })
       res.end(esm)
       return
     }
 
+    if (req.url === '/esm/esbuild.min.js') {
+      res.writeHead(200, { 'Content-Type': 'application/javascript' })
+      res.end(esmMin)
+      return
+    }
+
     if (req.url === '/esbuild.wasm') {
       res.writeHead(200, { 'Content-Type': 'application/wasm' })
       res.end(wasm)

diff --git a/scripts/esbuild.js b/scripts/esbuild.js
@@ -63,48 +63,55 @@ function buildWasmLib(esbuildPath) {
   fs.writeFileSync(path.join(libDir, 'browser.d.ts'), types_ts)
   fs.writeFileSync(path.join(esmDir, 'browser.d.ts'), types_ts)
 
-  // Minify "npm/esbuild-wasm/wasm_exec.js"
-  const wasm_exec_js = path.join(npmWasmDir, 'wasm_exec.js')
-  const wasmExecMin = childProcess.execFileSync(esbuildPath, [
-    wasm_exec_js,
-    '--minify',
-  ], { cwd: repoDir }).toString()
-  const commentLines = fs.readFileSync(wasm_exec_js, 'utf8').split('\n')
-  const firstNonComment = commentLines.findIndex(line => !line.startsWith('//'))
-  const wasmExecMinCode = '\n' + commentLines.slice(0, firstNonComment).concat(wasmExecMin).join('\n')
-
-  // Minify "lib/worker.ts"
-  const workerMinCode = childProcess.execFileSync(esbuildPath, [
-    path.join(repoDir, 'lib', 'worker.ts'),
-    '--minify',
-    '--define:ESBUILD_VERSION=' + JSON.stringify(version),
-  ], { cwd: repoDir }).toString().trim()
-
-  // Generate "npm/esbuild-wasm/lib/browser.js"
-  const umdPrefix = `(exports=>{`
-  const umdSuffix = `})(typeof exports==="object"?exports:(typeof self!=="undefined"?self:this).esbuild={});\n`
-  const browserCJS = childProcess.execFileSync(esbuildPath, [
-    path.join(repoDir, 'lib', 'browser.ts'),
-    '--bundle',
-    '--target=es2015',
-    '--minify',
-    '--format=cjs',
-    '--define:ESBUILD_VERSION=' + JSON.stringify(version),
-    '--define:WEB_WORKER_SOURCE_CODE=' + JSON.stringify(wasmExecMinCode + workerMinCode),
-  ], { cwd: repoDir }).toString()
-  fs.writeFileSync(path.join(libDir, 'browser.js'), umdPrefix + browserCJS.trim() + umdSuffix)
-
-  // Generate "npm/esbuild-wasm/esm/browser.js"
-  const browserESM = childProcess.execFileSync(esbuildPath, [
-    path.join(repoDir, 'lib', 'browser.ts'),
-    '--bundle',
-    '--target=es2017',
-    '--minify',
-    '--format=esm',
-    '--define:ESBUILD_VERSION=' + JSON.stringify(version),
-    '--define:WEB_WORKER_SOURCE_CODE=' + JSON.stringify(wasmExecMinCode + workerMinCode),
-  ], { cwd: repoDir }).toString()
-  fs.writeFileSync(path.join(esmDir, 'browser.js'), browserESM.trim())
+  for (const minify of [false, true]) {
+    const minifyFlags = minify ? ['--minify'] : []
+
+    // Process "npm/esbuild-wasm/wasm_exec.js"
+    const wasm_exec_js = path.join(npmWasmDir, 'wasm_exec.js')
+    let wasmExecCode = fs.readFileSync(wasm_exec_js, 'utf8');
+    if (minify) {
+      const wasmExecMin = childProcess.execFileSync(esbuildPath, [
+        wasm_exec_js,
+        '--target=es2015',
+      ].concat(minifyFlags), { cwd: repoDir }).toString()
+      const commentLines = wasmExecCode.split('\n')
+      const firstNonComment = commentLines.findIndex(line => !line.startsWith('//'))
+      wasmExecCode = '\n' + commentLines.slice(0, firstNonComment).concat(wasmExecMin).join('\n')
+    }
+
+    // Process "lib/worker.ts"
+    const workerCode = childProcess.execFileSync(esbuildPath, [
+      path.join(repoDir, 'lib', 'worker.ts'),
+      '--target=es2015',
+      '--define:ESBUILD_VERSION=' + JSON.stringify(version),
+    ].concat(minifyFlags), { cwd: repoDir }).toString().trim()
+
+    // Generate "npm/esbuild-wasm/lib/browser.*"
+    const umdPrefix = `(exports=>{`
+    const umdSuffix = `})(typeof exports==="object"?exports:(typeof self!=="undefined"?self:this).esbuild={});`
+    const browserCJS = childProcess.execFileSync(esbuildPath, [
+      path.join(repoDir, 'lib', 'browser.ts'),
+      '--bundle',
+      '--target=es2015',
+      '--format=cjs',
+      '--define:ESBUILD_VERSION=' + JSON.stringify(version),
+      '--define:WEB_WORKER_SOURCE_CODE=' + JSON.stringify(wasmExecCode + workerCode),
+      '--banner=' + umdPrefix,
+      '--footer=' + umdSuffix,
+    ].concat(minifyFlags), { cwd: repoDir }).toString()
+    fs.writeFileSync(path.join(libDir, minify ? 'browser.min.js' : 'browser.js'), browserCJS)
+
+    // Generate "npm/esbuild-wasm/esm/browser.min.js"
+    const browserESM = childProcess.execFileSync(esbuildPath, [
+      path.join(repoDir, 'lib', 'browser.ts'),
+      '--bundle',
+      '--target=es2017',
+      '--format=esm',
+      '--define:ESBUILD_VERSION=' + JSON.stringify(version),
+      '--define:WEB_WORKER_SOURCE_CODE=' + JSON.stringify(wasmExecCode + workerCode),
+    ].concat(minifyFlags), { cwd: repoDir }).toString()
+    fs.writeFileSync(path.join(esmDir, minify ? 'browser.min.js' : 'browser.js'), browserESM)
+  }
 }
 
 exports.buildBinary = () => {