Dynamically load assets into your views from your
rev-manifest.jsonmanifest revision file (e.g.<script src="{{ manifest('foo.js'); }}"></script>returns<script src="/foo-0775041dd4.js"></script>when rendered).Works with any templating engine, such as pug, ejs, or nunjucks. Inspired by express-rev and built for koa.
npm:
npm install koa-manifest-revyarn:
yarn add koa-manifest-rev-
Require the package and include the middleware
import Koa from 'koa'; import koaManifestRev from 'koa-manifest-rev'; import path from 'path'; const app = new Koa(); app.use(koaManifestRev({ manifest: path.join(__dirname, 'build', 'rev-manifest.json'), prepend: '/' }));
-
Call the
manifest(str)helper function in your views when you need to include assets (requires a templating engine).pug:
html head title Foo body h1 Foo script(src=manifest('foo.js'))<html> <head> <title>Foo</title> </head> <body> <h1>Foo</h1> <script src="<%= manifest('foo.js'); %>"></script> </body> </html>
nunjucks (via koa-nunjucks-promise):
<html> <head> <title>Foo</title> </head> <body> <h1>Foo</h1> <script src="{{ manifest('foo.js'); }}"></script> </body> </html>
-
koaManifestRev(options)- accepts a requiredoptionsargument for setup. Returns middleware for use inapp.usestatement (which in turn binds toctx.statea helper function calledmanifest). Here are the properties accepts in theoptionsargument.manifest(required) - path to a validrev-manifest.jsonfile (e.g. as built by gulp-rev or gulp-rev-all)prepend(optional) - string to prepend before file paths rendered after lookup (e.g. if you type{{ manifest('foo.js'); }}in your view, and you have passedprepend: '/dist/'in your setup, then your tag would render as<script src="/dist/foo-0775041dd4.js"></script>(defaults to/)
-
manifest(str)- the helper function bound toctx.statewhenkoaManifestRevmiddleware is included in your app. Returns the string found from a lookup in yourrev-manifest.jsonfile for thestrargument passed (e.g. if you type{{ manifest('foo.js'); }}in your view, then it returns for the value of thefoo.jsproperty as defined in yourmanifestfile, such asfoo-0775041dd4.js). If the found is not found, then the inputstrargument is returned.
| Name | Website |
|---|---|
| Nick Baugh | http://niftylettuce.com/ |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent