Merge pull request #64 from privatenumber/develop

Author: privatenumber

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       with:
         node-version: 14.x
     - name: Install dependencies
-      run: yarn
+      run: npm ci
     - name: Test
       run: npm run test --if-present
     - name: Release

.github/workflows/test.yml

@@ -23,6 +23,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Install dependencies
-      run: yarn
+      run: npm ci
     - name: Test
       run: npm run test --if-present

.gitignore

@@ -1,3 +1,19 @@
-node_modules
-types
-dist
+# Mac OS X
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz

.releaserc

@@ -3,7 +3,7 @@
     "master",
     {
       "name": "next",
-      "prerelease": true
+      "prerelease": "alpha"
     }
   ]
 }

.xo-config

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Hiroki Osame
+Copyright (c) Hiroki Osame <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -2,9 +2,11 @@
 
 Speed up your Webpack build with [esbuild](https://github.com/evanw/esbuild)! 🔥
 
+[esbuild](https://github.com/evanw/esbuild) is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification.
 
-[esbuild](https://github.com/evanw/esbuild) is written in Go, and supports blazing fast ESNext & TypeScript transpilation, and JS minification.
+[esbuild-loader](https://github.com/privatenumber/esbuild-loader) lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!
 
+<sub>If you like this project, please star it & [follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️</sub>
 
 ## 🚀 Install
 
@@ -31,8 +33,8 @@ In `webpack.config.js`:
 +         test: /\.js$/,
 +         loader: 'esbuild-loader',
 +         options: {
-+           target: 'es2015', // Syntax to compile to (see options below for possible values)
-+         },
++           target: 'es2015' // Syntax to compile to (see options below for possible values)
++         }
 +       },
 
         ...
@@ -55,26 +57,41 @@ In `webpack.config.js`:
       rules: [
 -       {
 -         test: /\.tsx?$/,
--         use: 'ts-loader',
+-         use: 'ts-loader'
 -       },
 +       {
 +         test: /\.tsx?$/,
 +         loader: 'esbuild-loader',
 +         options: {
 +           loader: 'tsx', // Or 'ts' if you don't need tsx
-+           target: 'es2015',
-+         },
++           target: 'es2015'
++         }
 +       },
 
         ...
-      ],
+      ]
     },
     plugins: [
 +     new ESBuildPlugin()
     ]
   }
 ```
 
+#### Configuration
+If you have a `tsconfig.json` file, you can pass it in via the `tsconfigRaw` option. Note, esbuild only supports [a subset of `tsconfig` options](https://github.com/evanw/esbuild/blob/master/lib/types.ts#L92) and does not do type checks.
+
+```diff
+  {
+      test: /\.tsx?$/,
+      loader: 'esbuild-loader',
+      options: {
+          loader: 'tsx',
+          target: 'es2015',
++         tsconfigRaw: require('./tsconfig.json')
+      }
+  }
+```
+
 ### Minification (eg. Terser)
 You can replace JS minifiers like Terser or UglifyJs. Checkout the [benchmarks](https://github.com/privatenumber/minification-benchmarks) to see how much faster esbuild is.
 
@@ -92,8 +109,10 @@ In `webpack.config.js`:
 +   optimization: {
 +     minimize: true,
 +     minimizer: [
-+       new ESBuildMinifyPlugin()
-+     ],
++       new ESBuildMinifyPlugin({
++         target: 'es2015' // Syntax to compile to (see options below for possible values)
++       })
++     ]
 +   },
 
     plugins: [
@@ -102,11 +121,15 @@ In `webpack.config.js`:
   }
 ```
 
+> _💁‍♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS_
+> 
+> The `target` option tells _esbuild_ that it can use newer JS syntax to perform better minification. If you're not using TypeScript or any syntax unsupported by Webpack, you can also leverage this as a transpilation step. It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file.
+
 ## ⚙️ Options
 
 ### Loader
 The loader supports options from [esbuild](https://github.com/evanw/esbuild#command-line-usage).
-- `target` `<String>` (`es2015`) - Environment target (e.g. es2017, chrome80, esnext)
+- `target` `<String>` (`es2015`) - [Environment target](https://github.com/evanw/esbuild#javascript-syntax-support) (e.g. es2016, chrome80, esnext)
 - `loader` `<String>` (`js`) - Which loader to use to handle file
   - [Possible values](https://github.com/evanw/esbuild/blob/master/lib/types.ts#L3): `js`, `jsx`, `ts`, `tsx`, `json`, `text`, `base64`, `file`, `dataurl`, `binary`
 - `jsxFactory` `<String>` - What to use instead of React.createElement
@@ -115,7 +138,8 @@ The loader supports options from [esbuild](https://github.com/evanw/esbuild#comm
 Enable source-maps via [`devtool`](https://webpack.js.org/configuration/devtool/)
 
 ### MinifyPlugin
-- `minify` `<Boolean>` (`true`) - Sets all `--minify-*` flags
+- `target` `<String>` (`esnext`) - [Environment target](https://github.com/evanw/esbuild#javascript-syntax-support) (e.g. es2016, chrome80, esnext)
+- `minify` `<Boolean>` (`true`) - Sets all `minify` flags
 - `minifyWhitespace` `<Boolean>` - Remove whitespace
 - `minifyIdentifiers` `<Boolean>` - Shorten identifiers
 - `minifySyntax` `<Boolean>` - Use equivalent but shorter syntax

README.md

@@ -13,15 +13,27 @@ async function ESBuildLoader(source) {
 		);
 	}
 
+	const transformOptions = {
+		...options,
+		target: options.target || 'es2015',
+		loader: options.loader || 'js',
+		sourcemap: this.sourceMap,
+		sourcefile: this.resourcePath,
+	};
+
 	try {
-		const result = await service.transform(source, {
-			...options,
-			target: options.target || 'es2015',
-			loader: options.loader || 'js',
-			sourcemap: this.sourceMap,
-			sourcefile: this.resourcePath,
+		const result = await service.transform(source, transformOptions).catch(async error => {
+			// Target might be a TS file accidentally parsed as TSX
+			if (transformOptions.loader === 'tsx' && error.message.includes('Unexpected')) {
+				transformOptions.loader = 'ts';
+				return service.transform(source, transformOptions).catch(_ => {
+					throw error;
+				});
+			}
+
+			throw error;
 		});
-		done(null, result.js, result.jsSourceMap);
+		done(null, result.code, result.map);
 	} catch (error) {
 		done(error);
 	}

lib/loader.js

@@ -23,8 +23,8 @@ class ESBuildMinifyPlugin {
 	}
 
 	/**
-   * @param {import('webpack').Compiler} compiler
-   */
+	* @param {import('webpack').Compiler} compiler
+	*/
 	apply(compiler) {
 		compiler.hooks.compilation.tap(pluginName, compilation => {
 			if (!compiler.$esbuildService) {
@@ -101,14 +101,14 @@ class ESBuildMinifyPlugin {
 					assetName,
 					sourcemap ?
 						new SourceMapSource(
-							result.js || '',
+							result.code || '',
 							assetName,
-							result.jsSourceMap,
+							result.map,
 							source,
 							map,
 							true,
 						) :
-						new RawSource(result.js || ''),
+						new RawSource(result.code || ''),
 					{
 						...info,
 						minimized: true,

lib/minify-plugin.js

@@ -1,15 +1,15 @@
-const esbuild = require('esbuild');
+const {startService} = require('esbuild');
 
 class ESBuildPlugin {
 	/**
-   * @param {import('webpack').Compiler} compiler
-   */
+	* @param {import('webpack').Compiler} compiler
+	*/
 	apply(compiler) {
 		let watching = false;
 
-		const startService = async () => {
+		const safeStartService = async () => {
 			if (!compiler.$esbuildService) {
-				compiler.$esbuildService = await esbuild.startService();
+				compiler.$esbuildService = await startService();
 			}
 		};
 
@@ -20,12 +20,12 @@ class ESBuildPlugin {
 		});
 
 		compiler.hooks.run.tapPromise('esbuild', async () => {
-			await startService();
+			await safeStartService();
 		});
 
 		compiler.hooks.watchRun.tapPromise('esbuild', async () => {
 			watching = true;
-			await startService();
+			await safeStartService();
 		});
 
 		compiler.hooks.done.tap('esbuild', () => {