Script efficiency and intelligence are crucial factors that can affect an application’s overall performance and functionality. Powerful scripting tools like Wireit can help us optimize code and enhance its capabilities as well as improve productivity.
In this article, we’ll explore Wireit’s features and capabilities for improving script efficiency and intelligence. Jump ahead:
Let’s jump right in.
Wireit is a powerful tool that can extend the npm, pnpm, and Yarn scripts in your Node.js projects. While Wireit’s benefits are mostly focused on Node, it’s also possible to apply those benefits to TypeScript and other projects.
Let’s see how we can use Wireit to optimize code execution, improve application performance and functionality, and streamline our workflows.
Wireit offers many advanced features developers can use to develop and execute script more efficiently. Let’s explore some of its unique capabilities:
npm run commands: If you’re already familiar with npm run commands, you can easily use Wireit without needing to learn a new syntaxNow that we understand Wireit a little better, let’s take a look at how to get started using this tool in our projects.
To begin working with Wireit, you’ll first need to install it in your project. Integrating Wireit with VS Code also gives you access to additional capabilities. Let’s take a look.
Wireit seamlessly integrates with various package managers, allowing for easy installation and setup. No matter which package manager you prefer, Wireit can be effortlessly installed using the following commands:
# NPM npm i -D wireit # Yarn yarn add --dev wireit # PNPM pnpm install --dev wireit
Wireit can also be seamlessly integrated into VS Code, providing additional features and functionalities to enhance your development experience further:
You can install Wireit easily from the VS Code Extensions Marketplace. Simply open the Extensions view in VS Code, search for “Wireit,” and click on the Install button associated with the “google.wireit” extension.
Alternatively, you can install Wireit directly from the command line by executing the following command:
code --install-extension google.wireit
Let’s walk through a simple, practical way to implement Wireit in your project. Once you have successfully installed Wireit, navigate to the package.json file within your project. In this file, a scripts section defines various commands for your project’s execution.
Before configuring the script to utilize Wireit, let’s consider the initial "start" script defined as follows:
{
"scripts": {
"start": "node build/index.js"
}
}
To leverage the capabilities of Wireit, we can modify the script configuration as shown below:
{
"scripts": {
"start": "wireit"
},
"wireit": {
"start": {
"command": "node build/index.js"
}
}
}
We replaced the previous start script command with "wireit" in the modified configuration.
We also introduced a new section named wireit that specifies the "start" script and its associated command property, which points to the script we want to execute — in this case, node index.js.
Using this configuration, you can direct Wireit to run a particular script when you run the start command, utilizing Wireit’s advanced features and resulting in a more refined development workflow.
Let’s take a look at some practical use cases for Wireit’s powerful features.
Wireit provides a powerful feature that allows developers to declare dependencies between scripts. This function specifies the order of execution for scripts, ensuring that the scripts are called in order and enabling us to automate necessary build steps.
Let’s examine an example to illustrate this concept:
Learn more →{
"wireit": {
"build": {
"command": "tsc"
},
"start": {
"command": "node build/index.js",
"dependencies": ["build"]
}
}
}
In this example, we have a TypeScript project that we want to run without explicitly building it beforehand. Adding the "dependencies" property to the wireit.start script specifies that the build script should be executed first.
When you run the start script using your package manager, Wireit ensures that the build script automatically executes first. This eliminates the need for manual build steps while ensuring that the application is built and ready for execution.
Note that you can include multiple scripts in the dependencies array. When executed, the package manager will automatically run each of these scripts in parallel, ensuring all dependencies are satisfied before completing the central command.
Wireit offers different kinds of dependencies that can be declared within your scripts. Let’s explore each type in more detail below.
With Wireit, your script can depend on another script from your package manager without any modifications. Consider the following example:
{
"scripts": {
"build": "tsc",
"start": "wireit"
},
"wireit": {
"start": {
"command": "node build/index.js",
"dependencies": ["build"]
}
}
}
In this case, the start script depends on the build script. Wireit automatically recognizes the dependency, ensuring the build script is executed before running the command in start. However, note that this type of dependency script does not benefit from Wireit’s optimization features.
Wireit also allows you to create scripts that can only be used as dependencies. Take a look at the example below:
{
"scripts": {
"start": "wireit"
},
"wireit": {
"build": {
"command": "tsc"
},
"start": {
"command": "node build/index.js",
"dependencies": ["build"]
}
}
}
The build script is no longer included in the package manager’s default script section in this example. Instead, it exists solely as wireit.build. Therefore, it can only be referenced as a dependency within other scripts.
Wireit provides a convenient feature — <relative-path>:<script-name> — that allows scripts to call other scripts from different packages. Consider the following example:
{
"scripts": {
"start": "wireit"
},
"wireit": {
"start": {
"command": "node build/index.js",
"dependencies": ["./path/to/package:start"]
}
}
}
In this case, the start script depends on a script named start from another package located at ./path/to/package. Wireit enables seamless cross-package script execution by recognizing and executing the specified dependency.
Wireit enables developers to watch files for changes, providing real-time feedback on the effects of code changes. Enabling file watching with Wireit involves two simple steps: specifying the files to watch and activating file-watching.
First, add the files you wish to monitor in the script where you want to apply the file-watching feature, like so:
{
"scripts": {
"start": "wireit"
},
"wireit": {
"start": {
"command": "node index.js",
"files": ["*.ts"]
}
}
}
In this example, the start script is configured to watch files with the .ts extension. Feel free to customize the file patterns based on your project’s requirements.
Next, you need to include the --watch flag to activate your command’s file-watching functionality. For example, using npm:
npm run start --watch
Wireit will continuously monitor the specified files for any changes and execute the script whenever modifications are detected. Integrating file watching capabilities with script execution enables you to observe and respond to real-time updates during development.
Wireit allows you to clean your project outputs from previous runs, ensuring that your outputs are up-to-date and your project is fully built. All you need to do is specify the outputs to clean, then set the clean property to true.
Let’s take a look at an example where the output is a build folder. In the wireit.<script> configuration, define the outputs that need to be cleaned by adding them to the outputs array:
{
"wireit": {
"build": {
"command": "tsc",
"outputs": ["build/"]
}
}
}
In this case, we specified that the build script has an output in the build/ folder. Again, customize the outputs based on your project’s structure and requirements.
Then, to enable the cleaning feature for a particular script, set the clean property to true within the corresponding wireit.<script> configuration:
{
"wireit": {
"build": {
"command": "tsc",
"outputs": ["build/"],
"clean": true
}
}
}
With this configuration in place, whenever you run the build script, Wireit automatically deletes the specified output folder before executing the central command. This ensures a clean slate for each run, guaranteeing that your project outputs reflect the most recent build.
By default, when you specify your script’s files and outputs properties, Wireit automatically enables caching for your project. This intelligent feature optimizes the build process by avoiding unnecessary rebuilds when no changes are detected.
When you rebuild your project using Wireit, it compares the specified files in your script’s files or outputs arrays against the previous run’s versions. If there are no changes, Wireit intelligently copies the output from the last run instead of rebuilding the entire project.
This saves valuable processing power and reduces build time, resulting in significant time savings during development.
Local caching is enabled by default unless you run your application in a Continuous Integration environment like GitHub Actions. In such cases, Wireit stores the cache in the GitHub Actions cache, making it accessible to all GitHub users.
To enable this feature, you need to write the -uses command below into your workflow steps anywhere before your run your scripts:
- uses: google/wireit@setup-github-actions-caching/v1
Let’s look at an example below:
name: wireit-test
on: [push]
jobs:
run-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- uses: google/wireit@setup-github-actions-caching/v1
- run: npm i
- run: npm test
By default, Wireit assumes that your scripts are independent and have a defined start and end. However, there are cases where developers need to run long-running applications or servers that continue running until manually terminated.
Wireit introduces the concept of service mode to address these scenarios and ensure seamless handling of such scripts.
Consider a system where you’re running a server and want it to continue running until you manually shut it down. By default, when you terminate the server with Ctrl + C or ^C in your terminal or console, Wireit may display a message indicating that your application was killed.
While this method of termination may not cause any harm to your project, it may restrict the use of certain Wireit features in your script, such as the --watch feature, which relies on the script’s completion before initiating.
To declare your script as a service and enable Wireit to handle it accordingly, set wireit.<your-script>.service to true in your configuration:
{
"wireit": {
"start": {
"command": "node build/index.js",
"service": true,
"dependencies": ["build"]
}
}
}
By explicitly specifying the script as a service, Wireit understands it should handle it differently. This ensures that Wireit appropriately manages the script’s execution and associated features, even when it runs continuously.
As a result, you can leverage the full capabilities of Wireit while running long-running applications or servers without any interruptions or conflicts.
In this article, we learned about Wireit, a powerful tool for enhancing your workflow — especially in script development, where efficiency and intelligence play a crucial role. By integrating Wireit into your projects, you can optimize script execution, streamline processes, and boost productivity.
If you’re interested in seeing some more practical applications of Wireit, check out these demo projects and let me know if you have any questions.
Monitor failed and slow network requests in productionDeploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third-party services are successful, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.
LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
