-
Add a
copyloader (#2255)You can configure the "loader" for a specific file extension in esbuild, which is a way of telling esbuild how it should treat that file. For example, the
textloader means the file is imported as a string while thebinaryloader means the file is imported as aUint8Array. If you want the imported file to stay a separate file, the only option was previously thefileloader (which is intended to be similar to Webpack'sfile-loaderpackage). This loader copies the file to the output directory and imports the path to that output file as a string. This is useful for a web application because you can refer to resources such as.pngimages by importing them for their URL. However, it's not helpful if you need the imported file to stay a separate file but to still behave the way it normally would when the code is run without bundling.With this release, there is now a new loader called
copythat copies the loaded file to the output directory and then rewrites the path of the import statement orrequire()call to point to the copied file instead of the original file. This will automatically add a content hash to the output name by default (which can be configured with the--asset-names=setting). You can use this by specifyingcopyfor a specific file extension, such as with--loader:.png=copy. -
Fix a regression in arrow function lowering (#2302)
This release fixes a regression with lowering arrow functions to function expressions in ES5. This feature was introduced in version 0.7.2 and regressed in version 0.14.30.
In JavaScript, regular
functionexpressions treatthisas an implicit argument that is determined by how the function is called, but arrow functions treatthisas a variable that is captured in the closure from the surrounding lexical scope. This is emulated in esbuild by storing the value ofthisin a variable before changing the arrow function into a function expression.However, the code that did this didn't treat
thisexpressions as a usage of that generated variable. Version 0.14.30 began omitting unused generated variables, which caused the transformation ofthisto break. This regression happened due to missing test coverage. With this release, the problem has been fixed:// Original code function foo() { return () => this } // Old output (with --target=es5) function foo() { return function() { return _this; }; } // New output (with --target=es5) function foo() { var _this = this; return function() { return _this; }; }
This fix was contributed by @nkeynes.
-
Allow entity names as define values (#2292)
The "define" feature allows you to replace certain expressions with certain other expressions at compile time. For example, you might want to replace the global identifier
IS_PRODUCTIONwith the boolean valuetruewhen building for production. Previously the only expressions you could substitute in were either identifier expressions or anything that is valid JSON syntax. This limitation exists because supporting more complex expressions is more complex (for example, substituting in arequire()call could potentially pull in additional files, which would need to be handled). With this release, you can now also now define something as a member expression chain of the formfoo.abc.xyz. -
Implement package self-references (#2312)
This release implements a rarely-used feature in node where a package can import itself by name instead of using relative imports. You can read more about this feature here: https://nodejs.org/api/packages.html#self-referencing-a-package-using-its-name. For example, assuming the
package.jsonin a given package looks like this:// package.json { "name": "a-package", "exports": { ".": "./main.mjs", "./foo": "./foo.js" } }
Then any module in that package can reference an export in the package itself:
// ./a-module.mjs import { something } from 'a-package'; // Imports "something" from ./main.mjs.
Self-referencing is also available when using
require, both in an ES module, and in a CommonJS one. For example, this code will also work:// ./a-module.js const { something } = require('a-package/foo'); // Loads from ./foo.js.
-
Add a warning for assigning to an import (#2319)
Import bindings are immutable in JavaScript, and assigning to them will throw an error. So instead of doing this:
import { foo } from 'foo' foo++
You need to do something like this instead:
import { foo, setFoo } from 'foo' setFoo(foo + 1)
This is already an error if you try to bundle this code with esbuild. However, this was previously allowed silently when bundling is disabled, which can lead to confusion for people who don't know about this aspect of how JavaScript works. So with this release, there is now a warning when you do this:
▲ [WARNING] This assignment will throw because "foo" is an import [assign-to-import] example.js:2:0: 2 │ foo++ ╵ ~~~ Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. "setFoo") and then import and call that function here instead.This new warning can be turned off with
--log-override:assign-to-import=silentif you don't want to see it. -
Implement
alwaysStrictintsconfig.json(#2264)This release adds
alwaysStrictto the set of TypeScripttsconfig.jsonconfiguration values that esbuild supports. When this is enabled, esbuild will forbid syntax that isn't allowed in strict mode and will automatically insert"use strict";at the top of generated output files. This matches the behavior of the TypeScript compiler: https://www.typescriptlang.org/tsconfig#alwaysStrict.