npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpack-run-loader

v0.1.0-beta.7

Published

A webpack loader that executes function exported by previous loader and exports or returns its result or the original function bound to context and arguments.

Downloads

52

Readme

CircleCI codecov Codacy Badge npm

gh-issues-open gh-issues-closed gh-pr-open gh-pr-closed

Info

A webpack loader that executes function exported by previous loader and exports or returns its result or the original function bound to context and arguments. It is a mix of apply-loader and extract-loader. See Options for more details.

Reasoning / Alternatives

You probably can get away with using apply-loader with extract-loader. The reason why this loader was made is a specific scenario where a loader exports a function but also uses imports inside the script (e.g. pug-loader). This doesn't play nice with extract-laoder because of the way it replaces imports (as it wasn't meant for this scenario I guess).

Install

npm i webpack-run-loader
yarn add webpack-run-loader

Usage

For demonstration purposes let's say a loader uses this script to export a function:

const runtime = require("some-runtime");

module.exports = function(optionalArg) {
    doSomeStuff();

    const context = this.createContext(optionalArg);

    return runtime.yay(context);
}

Options

You can specify loader options the regular way in your webpack config:

{
    ...
    module: {
        ...
        {
            loader: "webpack-run-loader",
            options: {
                ...
            }
        }
    }
    ...
}

mode: ("run" | "bind")

Specifies the mode of the loader:

  • run: Actually runs the exported function and returns/exports its result
  • bind: Binds the exported function to optional context and args and exports (forces export to true) the bound function

Default is run.

export: boolean

Specifies whether the loader exports or returns the result of exported function. Default is false.

  • true makes webpack-run-loader behave the same way as apply-loader. Note that args option isn't fully compatible
  • false makes webpack-run-loaderbehave the same way as extract-loader with the exception, that it extracts the result of the function call instead of the source of the module.

Usually you want to set export to true if you need to further process the result in other loaders and you want to set it to false if you want to extract the result into a file (e.g. with file-loader)

Example (true)

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                createContext(optionalArg) {
                    ....
                }
            };
        },
        export: true
    }
}

// webpack-run-laoder will act as a "pitching" laoder
// and returns a script like the one below, same as apply-loader:

...
var req = require(/* remaining reuest in the loader chain */);
module.exports = (req["default"] || req).apply(/* context */, /* array of args */);

Example (false)

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                createContext(optionalArg) {
                    ....
                }
            };
        },
        export: false // default
    }
}

// webpack-run-laoder will return the raw result of the exported function.

Read more about loaders and pitching loaders.

stringify: boolean

Specifies whether the exported function's result will be ran through JSON.stringify or not. Default is false.

context: (loaderContext) => any

Function that returns context that will be exposed as this while running the exported function. This might be useful when you want to return the result of the function (export false) and you know the exported function is using this and you need to provide it.

Signature

(loaderContext) => any where loaderContext is webpack's loader context

Example

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                // we need to provide createContext in order for the script to work
                createContext(optionalArg) {
                    ....
                }
            };
        }
    }
}

args: Array

Array of arguments passed to exported function when executing it.

Example

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                createContext(optionalArg) {
                    // optionalArg will be ourOptionalArg
                    ....
                }
            };
        },
        args: [ourOptionalArg]
    }
}

Contributing

All PRs are welcome! Note that conventional changlog/standard version is used for versioning and commit messages.

Roadmap

  • More thorough tests
  • Support for scripts using ES import/export declarations