https://github.com/wufe/bundle-sink
Manage static assets within an ASP.NET Core application complying with common encapsulation practices.
https://github.com/wufe/bundle-sink
aspnetcore razor webpack
Last synced: 3 months ago
JSON representation
Manage static assets within an ASP.NET Core application complying with common encapsulation practices.
- Host: GitHub
- URL: https://github.com/wufe/bundle-sink
- Owner: wufe
- License: mit
- Created: 2020-11-07T13:28:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-21T11:38:52.000Z (about 5 years ago)
- Last Synced: 2025-09-23T03:42:21.449Z (10 months ago)
- Topics: aspnetcore, razor, webpack
- Language: C#
- Homepage:
- Size: 283 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# BundleSink
Manage static assets within an ASP.NET Core application complying with common encapsulation practices.
***
# Table of contents
* [Getting started](#getting-started)
* [Requirements](#requirements)
* [Installation](#installation)
* [Usage](#usage)
* [The result](#the-result)
* [Pay attention to execution order](#pay-attention-to-execution-order)
* [Rewrite output mode](#rewrite-output-mode)
* [Additional options](#additional-options)
* [Literal entries](#literal-entries)
* [Partial builds](#partial-builds)
***
# Getting started
## Requirements
- The library currently supports `netcoreapp3.1` applications.
- You need a webpack configuration for your bundles.
## Installation
- From the dotnet CLI:
`dotnet add package BundleSink`
- Import tag helpers within `_ViewImports.cshtml`:
`@addTagHelper *, BundleSink`
- From a command line:
`npm install bundle-sink-webpack-plugin`
- Update your webpack.config.js adding the plugin:
```js
const BundleSinkWebpackPlugin = require('bundle-sink-webpack-plugin');
module.exports = env => {
const bundleSinkWebpackPlugin = new BundleSinkWebpackPlugin({
output: path.resolve(__dirname, 'client-manifest.json')
});
return {
...,
plugins: [
...bundleSinkWebpackPlugin.plugins
]
};
}
```
- Initialize BundleSink in Program.cs:
```csharp
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder
.ConfigureBundleSink(builder => {
builder.WithWebpack("client-manifest.json", "/dist/");
})
.UseStartup();
});
```
> The function `WithWebpack` requires two arguments:
> - The name of the assets manifest created with webpack
> - The **public** output folder (i.e. the folder under wwwroot where the output is being generated by webpack)
## Usage
- Place a sink in your `_Layout.cshtml` or a razor page's "Scripts" section:
*e.g.:
```razor
Homepage
@section Scripts {
}
```
- Use a webpack entry from within a partial view / view-component, defining **the name of the entry**
```razor
This is a partial view from the homepage
```
## The result
The `` tag helper marked the specified entry as a dependency.
The `` tag helper uses the dependencies declared all over the razor pages, taking care of duplicates and required chunks
The html will contain the scripts required for the selected entries, with their hash appended as query string.
*e.g.*
```html
```
## Pay attention to execution order
The `` tag helper must be declared after all the `entries` gets declared, execution order wise.
The `_Layout.cshtml` page can contain a `` tag helper as first istruction and a page imported with the `@RenderBody()` function can contain a ``, because the `@RenderBody` function delays the execution of the entire layout page:
in other words, **the `` gets called first**.
At the same time, having the `entry` and the `sink` in the same page source **can prevent the entry to get printed**:
**Wrong usage**:
```cshtml
```
**Right usage**:
```cshtml
```
If you really need to declare sinks and entries in different ways, you can try enabling the [Rewrite output mode](#rewrite-output-mode).
***
## Rewrite output mode
There's a mode you can activate that allows to declare entries and sinks in the order you prefer.
This mode is called `RewriteOutput` and can be enabled while configuring bundle sink:
```csharp
webBuilder
.ConfigureBundleSink(builder =>
{
builder.RewriteOutput = true;
builder.WithWebpack("wwwroot/dist/client-manifest.json", "/dist/");
});
```
This modality is a little **hacky**: mocks the HttpContext.Response.Body to allow it to be read from a custom ResultFilter.
The performance implication of this operation has not been measured.
**Use it at your own risk.**
***
# Additional options
The webpack-entry accepts more options in form of attributes
- Use the attribute `key` if you need an entry to be imported more than once ... Why would you? (Their dependencies will be imported once)
- Use the attribute `async` to mark the entry (but not its dependencies) as async
- Use the attribute `defer` to mark the entry (but not its dependencies) as deferred
- Use the attribute `css-only` to use css assets only
- Use the attribute `js-only` to use js assets only
**Named sinks**
You can also render a webpack-entry to a specific sink:
- Use the `name` attribute on the sink tag helper
- Use the `sink` attribute on the webpack-entry tag helper
*e.g.*
```razor