Implementing Webpack from Scratch, But in Rust - [5] Support Customized JS Plugin

Referencing

This article corresponds to the Pull Request:

Our custom JS plugin myPlugin will be passed from rs-webpack-cli to rs-webpack-core. In rs-webpack-core, it uses a library called @rspack/lite-tapable, developed by the rspack team, to create a beforeRun Hook:

CODE Kopieren

export class Compiler {

    bindingRsWebpack: BindingRsWebpack

    hooks: {

        beforeRun: liteTapable.SyncHook<[string]>;

    }

    ...

}

Similar to Rust, when the Compiler is initialized, it iterates through all the plugins and executes their apply methods:

CODE Kopieren

constructor(props: RawConfig) {

    const {plugins} = props

    plugins.forEach(plugin => {

        plugin.apply(this)

    })

}

Then, through a series of operations, it wraps a function called register_before_run_taps and passes it to Rust. register_before_run_taps wraps the call to the beforeRun Hook's call function:

CODE Kopieren

this.registers = {

    registerBeforeRunTaps: this.#createHookRegisterTaps(

        RegisterJsTapKind.BeforeRun,

        () => this.hooks.beforeRun,

        queried => (native: string) => {

            // beforeRun.call 

            queried.call(native);

        }

    ),

}

this.bindingRsWebpack = new BindingRsWebpack(props, this.registers)

After this function is executed, it returns an array, and each element in the array can serve as an interceptor for the before_run Hook in Rust (only the call method is implemented):

CODE Kopieren

#[async_trait]

impl Interceptor<BeforeRunHook> for RegisterBeforeRunTaps {

  async fn call(

    &self,

    hook: &BeforeRunHook,

  ) -> rswebpack_error::Result<Vec<<BeforeRunHook as Hook>::Tap>> {

    if let Some(non_skippable_registers) = &self.inner.non_skippable_registers {

      if !non_skippable_registers.is_non_skippable(&RegisterJsTapKind::BeforeRun) {

        return Ok(Vec::new());

      }

    }

    let js_taps = self.inner.call_register(hook).await?;

    let js_taps = js_taps

      .iter()

      .map(|t| Box::new(BeforeRunTap::new(t.clone())) as <BeforeRunHook as Hook>::Tap)

      .collect();

    Ok(js_taps)

  }

}

In rswebpack_binding, these interceptors are applied through the JsHooksAdapterPlugin:

CODE Kopieren

impl Plugin for JsHooksAdapterPlugin {

  fn name(&self) -> &'static str {

    "rspack.JsHooksAdapterPlugin"

  }



  fn apply(&self, _ctx: PluginContext<&mut ApplyContext>) -> rswebpack_error::Result<()> {

    _ctx

      .context

      .compiler_hooks

      .before_run

      .intercept(self.register_before_run_taps.clone());

  }

}

PS: The call function in the interceptor is executed each time the call function of the Hook is invoked. For example, in the following example:

CODE Kopieren

const hook = new SyncHook(['arg1', 'arg2'])



hook.tap('test', (...args) => {

  console.log('test', ...args)

})



hook.intercept({

  // trigger when execute hook.call

  call: (...args) => {

    console.log('Execute interceptor call', ...args)

  },

})



hook.call('a1', 'a2')



// log

Execute interceptor call a1 a2

test a1 a2

When the before_run in Rust calls call, these interceptors' call functions will also be executed, and then the beforeRun.call wrapped in these interceptors on the JS side will be executed, triggering the execution of the corresponding Tap function in myPlugin.

With these steps, the entire Plugin system is completed. The complete changes can be seen here. I won't go through the code one by one, but by following the order in the diagram, you should be able to understand it.

The original intention of this series of articles was to deepen the understanding of webpack by reimplementing it. However, I found that my Rust skills were limited, and I didn't have the ability to implement a Plugin system. Most of the time was spent on integrating Rspack.

During this process, I realized that there are many areas that I don't understand well. I'll mark them down for future study:

• Napi, such as ThreadsafeFunction. Combining this with Node.js can achieve many things. I'll see if I can come up with some examples later.


• Asynchronous processing and tokio in Rust.


• Rust concurrent programming: multithreading, channels, etc.


• Macro programming in Rust, which is difficult to write and debug.

Please kindly give me a star!

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen