Dynamically load assets into your views from your
rev-manifest.json
manifest revision file (e.g.<script src="{{ manifest('foo.js'); }}"></script>
returns<script src="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/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-rev
yarn:
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 requiredoptions
argument for setup. Returns middleware for use inapp.use
statement (which in turn binds toctx.state
a helper function calledmanifest
). Here are the properties accepts in theoptions
argument.manifest
(required) - path to a validrev-manifest.json
file (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="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/dist/foo-0775041dd4.js"></script>
(defaults to/
)
-
manifest(str)
- the helper function bound toctx.state
whenkoaManifestRev
middleware is included in your app. Returns the string found from a lookup in yourrev-manifest.json
file for thestr
argument passed (e.g. if you type{{ manifest('foo.js'); }}
in your view, then it returns for the value of thefoo.js
property as defined in yourmanifest
file, such asfoo-0775041dd4.js
). If the found is not found, then the inputstr
argument is returned.
Name | Website |
---|---|
Nick Baugh | https://niftylettuce.com/ |