Coastal Media Brand

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.

What is Wireit?

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.

Unpacking Wireit’s features

Wireit offers many advanced features developers can use to develop and execute script more efficiently. Let’s explore some of its unique capabilities:

  • Seamless integration with npm run commands: If you’re already familiar with npm run commands, you can easily use Wireit without needing to learn a new syntax
  • Automatically run dependencies between npm scripts in parallel: Parallel execution significantly improves the overall efficiency and speed of script execution, enabling faster build processes
  • Continuous script execution with file watching: Wireit will rerun scripts continuously whenever changes are detected, allowing you to observe the impact of changes to code without needing manual script restarts
  • Smart skipping of fresh scripts: Wireit will detect script outputs that are already up to date and skip running those scripts, saving valuable time and resources by avoiding redundant executions
  • Efficient output caching: Incorporating efficient local and remote caching mechanisms allows you to access previously generated outputs without needing to recompute them, increasing script execution speed and reducing build times
  • Support for various project structures: Wireit is designed to work seamlessly with single packages, npm workspaces, and other monorepos, adapting to your project structure to enhance script execution for any type of project

Now that we understand Wireit a little better, let’s take a look at how to get started using this tool in our projects.

Getting started with Wireit

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.

Installing Wireit in your project

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

Integrating Wireit with VS Code

Wireit can also be seamlessly integrated into VS Code, providing additional features and functionalities to enhance your development experience further:

  • Documentation on hover
  • Autocompletion
  • Diagnoses for common mistakes
  • Suggestions for refactoring existing npm scripts

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

Demonstrating a simple implementation of 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.

Exploring Wireit’s capabilities

Let’s take a look at some practical use cases for Wireit’s powerful features.

Declaring dependencies for efficient workflow management

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:

{
  "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.


More great articles from LogRocket:


Vanilla script dependencies

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-only script dependencies

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.

Cross-package script dependencies

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.

Enabling real-time feedback with watch mode

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.

Cleaning build outputs

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.

Optimizing the build process with built-in caching

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/[email protected]/v1

Let’s look at an example below:

name: wireit-test
on: [push]
jobs:
    run-test:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/[email protected]
            - uses: actions/[email protected]
              with:
                node-version: 18
                cache: npm
            
            - uses: google/[email protected]/v1
            - run: npm i
            - run: npm test

Handling long-running applications with service mode

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.

Conclusion

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.

200’s only Monitor failed and slow network requests in production

Deploying 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. https://logrocket.com/signup/

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. .

Coastal Media Brand

© 2024 Coastal Media Brand. All rights Reserved.