cleanup after #342

evanw · Oct 18, 2020 · dd62d98 · dd62d98
1 parent cfaedae
commit dd62d98
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -81,6 +81,36 @@
 
     If you want to _conditionally_ import a file only if the export is actually used, you should mark the injected file as not having side effects by putting it in a package and adding `"sideEffects": false` in that package's `package.json` file. This setting is a [convention from Webpack](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) that esbuild respects for any imported file, not just files used with `--inject`.
 
+* Add an ECMAScript module build for the browser ([#342](https://github.com/evanw/esbuild/pull/342))
+
+    The [current browser API](https://github.com/evanw/esbuild/blob/cfaedaeeb35ae6e8b42921ab98ad98f75375d39f/docs/js-api.md#browser-api) lets you use esbuild in the browser via the `esbuild-wasm` package and a script tag:
+
+    ```html
+    <script src="node_modules/esbuild-wasm/lib/browser.js"></script>
+    <script>
+      esbuild.startService({
+        wasmURL: 'node_modules/esbuild-wasm/esbuild.wasm',
+      }).then(service => {
+        // Use service
+      })
+    </script>
+    ```
+
+    In addition to this approach, you can now also use esbuild in the browser from a module-type script (note the use of `esm/browser.js` instead of `lib/browser.js`):
+
+    ```html
+    <script type="module">
+      import * as esbuild from 'node_modules/esbuild-wasm/esm/browser.js'
+      esbuild.startService({
+        wasmURL: 'node_modules/esbuild-wasm/esbuild.wasm',
+      }).then(service => {
+        // Use service
+      })
+    </script>
+    ```
+
+    Part of this fix was contributed by [@calebeby](https://github.com/calebeby).
+
 ## 0.7.16
 
 * Fix backward slashes in source maps on Windows ([#463](https://github.com/evanw/esbuild/issues/463))

diff --git a/lib/browser.ts b/lib/browser.ts
@@ -78,13 +78,3 @@ export const startService: typeof types.startService = options => {
     }
   })
 }
-
-let api: typeof types = {
-  build,
-  buildSync,
-  transform,
-  transformSync,
-  startService,
-};
-
-export default api
diff --git a/npm/esbuild-wasm/package.json b/npm/esbuild-wasm/package.json
@@ -9,17 +9,6 @@
   },
   "main": "lib/main.js",
   "browser": "lib/browser.js",
-  "module": "lib/browser.mjs",
-  "exports": {
-    ".": {
-      "browser": {
-        "module": "./lib/browser.mjs",
-        "script": "./lib/browser.js"
-      },
-      "node": "./lib/main.js"
-    },
-    "./": "./"
-  },
   "types": "lib/main.d.ts",
   "directories": {
     "bin": "bin"

diff --git a/scripts/esbuild.js b/scripts/esbuild.js
@@ -9,10 +9,7 @@ const version = fs.readFileSync(path.join(repoDir, 'version.txt'), 'utf8').trim(
 
 function buildNativeLib(esbuildPath) {
   const libDir = path.join(npmDir, 'lib')
-  try {
-    fs.mkdirSync(libDir)
-  } catch (e) {
-  }
+  fs.mkdirSync(libDir, { recursive: true })
 
   // Generate "npm/esbuild/install.js"
   childProcess.execFileSync(esbuildPath, [
@@ -43,10 +40,9 @@ function buildNativeLib(esbuildPath) {
 function buildWasmLib(esbuildPath) {
   const npmWasmDir = path.join(repoDir, 'npm', 'esbuild-wasm')
   const libDir = path.join(npmWasmDir, 'lib')
-  try {
-    fs.mkdirSync(libDir)
-  } catch (e) {
-  }
+  const esmDir = path.join(npmWasmDir, 'esm')
+  fs.mkdirSync(libDir, { recursive: true })
+  fs.mkdirSync(esmDir, { recursive: true })
 
   // Generate "npm/esbuild-wasm/lib/main.js"
   childProcess.execFileSync(esbuildPath, [
@@ -64,6 +60,7 @@ function buildWasmLib(esbuildPath) {
   const types_ts = fs.readFileSync(path.join(repoDir, 'lib', 'types.ts'), 'utf8')
   fs.writeFileSync(path.join(libDir, 'main.d.ts'), types_ts)
   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')
@@ -82,10 +79,10 @@ function buildWasmLib(esbuildPath) {
     '--define:ESBUILD_VERSION=' + JSON.stringify(version),
   ], { cwd: repoDir }).toString().trim()
 
-  // Generate "npm/esbuild-wasm/browser.js"
-  const umdPrefix = `Object.assign(typeof exports==="object"?exports:(typeof self!=="undefined"?self:this).esbuild={},(module=>{`
-  const umdSuffix = `return module})({}).exports);\n`
-  const browserJs = childProcess.execFileSync(esbuildPath, [
+  // 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',
@@ -94,17 +91,19 @@ function buildWasmLib(esbuildPath) {
     '--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 + browserJs.trim() + umdSuffix)
+  fs.writeFileSync(path.join(libDir, 'browser.js'), umdPrefix + browserCJS.trim() + umdSuffix)
 
-  // Generate "npm/esbuild-wasm/browser.mjs"
-  const browserMjs = childProcess.execFileSync(esbuildPath, [
+  // Generate "npm/esbuild-wasm/esm/browser.js"
+  const browserESM = childProcess.execFileSync(esbuildPath, [
     path.join(repoDir, 'lib', 'browser.ts'),
     '--bundle',
-    '--target=es2020',
+    '--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(libDir, 'browser.mjs'), browserMjs.trim())
+  fs.writeFileSync(path.join(esmDir, 'browser.js'), browserESM.trim())
 }
 
 exports.buildBinary = () => {