Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jouni-kantola/razor-partial-views-webpack-plugin
Plugin for generating ASP.NET Razor partial views for assets built with webpack.
https://github.com/jouni-kantola/razor-partial-views-webpack-plugin
aspnet razor webpack webpack-plugin
Last synced: about 2 months ago
JSON representation
Plugin for generating ASP.NET Razor partial views for assets built with webpack.
- Host: GitHub
- URL: https://github.com/jouni-kantola/razor-partial-views-webpack-plugin
- Owner: jouni-kantola
- License: mit
- Created: 2017-11-11T05:07:41.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-08T04:28:58.000Z (11 months ago)
- Last Synced: 2024-07-09T00:55:40.831Z (2 months ago)
- Topics: aspnet, razor, webpack, webpack-plugin
- Language: JavaScript
- Size: 1.46 MB
- Stars: 13
- Watchers: 1
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Razor Partial Views Webpack Plugin
Plugin for generating ASP.NET Razor partial views for assets built with webpack.
## Usage
`razor-partial-views-webpack-plugin` use rules for generating `cshtml`/`vbhtml` views wrapping assets built with webpack. With the plugin comes templates for scripts and styles, but any type of asset can be used as Razor view source.
## Installation
- `npm install razor-partial-views-webpack-plugin --save-dev`
- `yarn add razor-partial-views-webpack-plugin --dev`
## Getting started
To get familiar with the output from `razor-partial-views-webpack-plugin`, the quickest way is using the plugin's defaults, to generate partial views for all JavaScript and CSS.
```javascript
// webpack.config.js
plugins: [new RazorPartialViewsWebpackPlugin()];
```
## Options
The templating process can be customized to fit the needs of your application. Here follows the configuration options that are supported.
```javascript
new RazorPartialViewsWebpackPlugin({
// "csharp" (default) or "vb"
target: "chsharp",
rules: [
{
// regex match asset filename(s)
// (takes precedence over `name`)
test: /(app|vendor).*\.js$/
},
{
// match asset by name
name: "runtime",
// no attributes in `template` are required
template: {
// prepend header to view
header: () => "",
// usings in view
using: ["System", "System.Web"],
// view's model
model: "dynamic",
// append footer to view
footer: () => `@* View generated ${new Date().toISOString()} *@`,
// if needed, use a custom template
path: path.join(__dirname, "templates/custom-template.tmpl"),
// in custom template, placeholder to find & replace with asset
// (default ##URL##/##SOURCE##)
replace: /##CONTENT-GOES-HERE##/
},
// `output` not required, defaults to:
// - webpack's output directory
// - load asset by URL
// - asset name from chunk name/filename
output: {
inline: true,
async: false,
defer: false,
// asset is ESM module
module: false,
// ...or fallback if module not supported
nomodule: false,
// assign predicable name to generated partial view
name: defaultName => `generated-${defaultName}`,
// output view to custom location
path: path.join(__dirname, "Views/_GeneratedViews")
}
}
]
});
```
## Example configuration
`razor-partial-views-webpack-plugin` supports referencing and inlining assets generated by webpack. Here follows an example configuration based on [webpack's caching docs](https://webpack.js.org/guides/caching/). A partial view for styles is also created.
```javascript
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RazorPartialViewsWebpackPlugin = require("razor-partial-views-webpack-plugin");
module.exports = {
entry: {
app: path.join(__dirname, "app.js")
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "/dist/",
filename: "[name].[contenthash].js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
"css-loader"
]
}
]
},
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
},
defaultStyles: {
name: "styles",
test: /\.css$/,
chunks: "all",
enforce: true
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
ignoreOrder: false
}),
new RazorPartialViewsWebpackPlugin({
rules: [
{
name: ["app", "vendors", "styles"]
},
{
name: "runtime",
output: {
inline: true
}
}
]
})
]
};
```
## Options in use
Included in the plugin repository is an example webpack setup where various [rules](https://github.com/jouni-kantola/razor-partial-views-webpack-plugin/blob/master/example/razor-partial-views-config.js) are used. By executing `npm run example`, partial views are created e.g. for inlining CSS and webpack's runtime.
## Compiling views
When running your ASP.NET web site, the generated views will be compiled. Below follows a few tips to keep in mind:
- If you run into `Compiler Error Message: CS0103: The name 'model' does not exist in the current context`, this [Stack Overflow answer](https://stackoverflow.com/a/19696998) guides you in the right direction.
- If you're executing `razor-partial-views-webpack-plugin` on a build server, make sure you've included the generated views' output directory in the artifact.
## Even more control
`razor-partial-views-webpack-plugin` is an extension of `templated-assets-webpack-plugin`. For more configuration options and detailed control, use [templated-assets-webpack-plugin](https://github.com/jouni-kantola/templated-assets-webpack-plugin).
## Feedback
- For feedback, bugs or change requests, please use [Issues](https://github.com/jouni-kantola/razor-partial-views-webpack-plugin/issues).
- For direct contact, tweet [@jouni_kantola](https://twitter.com/jouni_kantola).