@hdsydsvenskan/asset-versions

CLI and helper methods for our asset versions

Usage no npm install needed!

<script type="module">
  import hdsydsvenskanAssetVersions from 'https://cdn.skypack.dev/@hdsydsvenskan/asset-versions';
</script>

README

Asset Versions

CLI and helper methods for asset versioning. Includes support for Webpack chunking.

  • Minimum supported Node version is v14
  • Minimum supported Webpack version is v4.44.0

Installation

npm install --save-dev @hdsydsvenskan/asset-versions

Setup for dev environment

Install Husky hooks using yarn husky install before pushing changes.

Release new version

Follow Semantic Versioning and use np and a version like patch | minor | major | prepatch | preminor | premajor | prerelease | 1.2.3

np patch

Example

See a full example, including Webpack support, in example/ folder and/or run the start npm script (run yarn start / npm start).

Usage

Generate asset version through CLI

  1. Add an assets.json
  2. Run asset-versions
  3. Get an assets-versioned.json file

Programmaticly access versioned paths

const AssetVersions = require('@hdsydsvenskan/asset-versions');

const assets = new AssetVersions({
  assetDefinitions: __dirname + '/assets.json'
});

// Returns something like 'assets/rev/main-e508b3af03.css'
assets.getAssetPath('assets/main.css');

Or, in case of code splitted javascript (likely through the use of Webpack):

// Returns something like ['assets/rev/main-e508b3af03.js', 'assets/rev/vendor-abc123.js']
assets.getAssetPathWithDependencies('assets/main.js');

Configure asset versions

Create a assets.json file:

{
  "sourceDir": "assets",
  "targetDir": "assets/rev/",
  "files": [
    "main.css",
    "main-dev.css",
    "main.js"
  ]
}

Configuration options

  • versions file name – both the cli (through the --output/ -o flag) and the module (through the versionsFileName option) can be tweaked to use another versions file than the default asset-versions.json

Extras

  • AssetVersions.webpackManifestPluginGenerate – a generate method for use with webpack-manifest-plugin to generate manifest with dependencies