esbuild-loader
Advanced tools
esbuild-loader - npm Package Compare versions
Comparing version 4.0.2 to 4.0.3
| { | ||
| "name": "esbuild-loader", | ||
| "version": "4.0.2", | ||
| "version": "4.0.3", | ||
| "description": "⚡️ Speed up your Webpack build with esbuild", | ||
@@ -13,4 +13,4 @@ "keywords": [ | ||
| "license": "MIT", | ||
| "repository": "esbuild-kit/esbuild-loader", | ||
| "funding": "https://github.com/esbuild-kit/esbuild-loader?sponsor=1", | ||
| "repository": "privatenumber/esbuild-loader", | ||
| "funding": "https://github.com/privatenumber/esbuild-loader?sponsor=1", | ||
| "author": { | ||
@@ -25,6 +25,6 @@ "name": "Hiroki Osame", | ||
| "main": "./dist/index.cjs", | ||
| "types": "./dist/index.d.ts", | ||
| "types": "./dist/index.d.cts", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "types": "./dist/index.d.cts", | ||
| "default": "./dist/index.cjs" | ||
@@ -31,0 +31,0 @@ }, |
@@ -7,10 +7,15 @@ # esbuild-loader <a href="https://npm.im/esbuild-loader"><img src="https://badgen.net/npm/v/esbuild-loader"></a> <a href="https://npm.im/esbuild-loader"><img src="https://badgen.net/npm/dm/esbuild-loader"></a> <a href="https://packagephobia.now.sh/result?p=esbuild-loader"><img src="https://packagephobia.now.sh/badge?p=esbuild-loader"></a> | ||
| [_esbuild-loader_](https://github.com/esbuild-kit/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)! | ||
| [_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)! | ||
| Curious how much faster your build will be? See [what users are saying](https://github.com/esbuild-kit/esbuild-loader/discussions/138). | ||
| Curious how much faster your build will be? See [what users are saying](https://github.com/privatenumber/esbuild-loader/discussions/138). | ||
| > **💡 Protip: Enhance your Node.js DX with `tsx`** | ||
| > [!TIP] | ||
| > **Are you using TypeScript with Node.js?** | ||
| > | ||
| > If you're interested in supercharging your Node.js runtime with esbuild, take a look at our new project [`tsx`](https://github.com/esbuild-kit/tsx). It's an esbuild-enhanced Node.js runtime that can run TypeScript instantly! | ||
| > Supercharge your Node.js with TypeScript support using _tsx_! | ||
| > | ||
| > _tsx_ is a simple, lightweight, and blazing fast alternative to ts-node. | ||
| > | ||
| > [→ Learn more about _tsx_](https://github.com/privatenumber/tsx) | ||
@@ -75,8 +80,8 @@ <br> | ||
| - `.js` files will be treated as JS (no JSX allowed) | ||
| - `.jsx` & `.tsx` files as JSX | ||
| - `.ts` as TS (no JSX allowed) | ||
| - `.jsx` as JSX | ||
| - `.ts` as TS (no TSX allowed) | ||
| - `.tsx` as TSX | ||
| If you want to force a specific handler on different file extensions (e.g. to allow JSX in `.js` files), you can use the [`loader`](https://github.com/esbuild-kit/esbuild-loader/#loader) option: | ||
| If you want to force a specific loader on different file extensions (e.g. to allow JSX in `.js` files), you can use the [`loader` option](https://github.com/privatenumber/esbuild-loader/#loader): | ||
@@ -102,3 +107,3 @@ ```diff | ||
| You can replace `babel-loader` with `esbuild-loader` to transpile new JavaScript syntax into code compatible with older JavaScript engines. | ||
| `esbuild-loader` can be used in-place of `babel-loader` to transpile new JavaScript syntax into code compatible with older JavaScript engines. | ||
@@ -135,3 +140,5 @@ While this ensures your code can run smoothly across various environments, note that it can bloat your output code (like Babel). | ||
| > Note: You cannot use the `tsx` loader for `*.ts` files as it has incompatible syntax with the `ts` loader. | ||
| > [!IMPORTANT] | ||
| > It's possible to pass in `loader: 'tsx'` to handle both `.ts` and `.tsx` files, but you should not do this as TypeScript and TSX do not have compatible syntaxes. | ||
| > | ||
@@ -156,3 +163,3 @@ > [→ Read more](https://esbuild.github.io/content-types/#ts-vs-tsx) | ||
| You can also use the `tsconfigRaw` option to pass in a raw `tsconfig` object, but it will not resolve the `extends` property. | ||
| The `tsconfigRaw` option can be used to pass in a raw `tsconfig` object, but it will not resolve the `extends` property. | ||
@@ -189,3 +196,3 @@ | ||
| ### Minification | ||
| 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. The `target` option tells esbuild that it can use newer JS syntax to perform better minification. | ||
| Esbuild supports JavaScript minification, offering a faster alternative to traditional JS minifiers like Terser or UglifyJs. Minification is crucial for reducing file size and improving load times in web development. For a comparative analysis of its performance, refer to these [minification benchmarks](https://github.com/privatenumber/minification-benchmarks). | ||
@@ -210,5 +217,8 @@ In `webpack.config.js`: | ||
| > [!TIP] | ||
| > Utilizing the `target` option allows for the use of newer JavaScript syntax, enhancing minification effectiveness. | ||
| ### Defining constants | ||
| You can replace the [`DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) to define global constants. The parsing cost of the DefinePlugin is often overlooked so replacing it with esbuild can speed up the build. | ||
| Webpack's [`DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) can replaced with `EsbuildPlugin` to define global constants. This could speed up the build by removing the parsing costs associated with the `DefinePlugin`. | ||
@@ -229,6 +239,4 @@ In `webpack.config.js`: | ||
| + new EsbuildPlugin({ | ||
| + options: { | ||
| + define: { | ||
| + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), | ||
| + }, | ||
| + define: { | ||
| + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), | ||
| + }, | ||
@@ -242,10 +250,9 @@ + }), | ||
| If you're not using TypeScript, JSX, or any syntax unsupported by Webpack, you can also leverage the minifier for transpilation (as an alternative to Babel). | ||
| If your project does not use TypeScript, JSX, or any other syntax that requires additional configuration beyond what Webpack provides, you can use `EsbuildPlugin` for transpilation instead of the loader. | ||
| 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. | ||
| It will be faster because there's fewer files to process, and will produce a smaller output because polyfills will only be added once for the entire build as opposed to per file. | ||
| Simply set the `target` option on the minifier to specify which support level you want. | ||
| To utilize esbuild for transpilation, simply set the `target` option on the plugin to specify which syntax support you want. | ||
| ## CSS Minification | ||
@@ -362,3 +369,3 @@ | ||
| [→ esbuild-loader examples](https://github.com/esbuild-kit/esbuild-loader-examples) | ||
| [→ esbuild-loader examples](https://github.com/privatenumber/esbuild-loader-examples) | ||
@@ -544,3 +551,3 @@ <br> | ||
| If you're using React, check out [this example](https://github.com/esbuild-kit/esbuild-loader-examples/blob/52ca91b8cb2080de5fc63cc6e9371abfefe1f823/examples/react/webpack.config.js#L39-L41) on how to auto-import React in your components. | ||
| If you're using React, check out [this example](https://github.com/privatenumber/esbuild-loader-examples/blob/52ca91b8cb2080de5fc63cc6e9371abfefe1f823/examples/react/webpack.config.js#L39-L41) on how to auto-import React in your components. | ||
@@ -547,0 +554,0 @@ ### Is it possible to use Babel plugins? |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.05%
34077
- Number of lines in readme file
- increased by1.19%
593
Worsened metrics
- Lines of code
- decreased by-10.53%
221