webpack-auto-inject-version/README.md

219 lines
5.4 KiB
Markdown
Raw Normal View History

2016-10-21 19:04:52 +11:00
# Auto inject version - Webpack plugin
2017-04-11 09:11:09 +10:00
Adds version from package.json into every single file as top comment block.
2016-10-20 17:58:19 +11:00
2017-04-13 07:47:11 +10:00
# Install
2017-04-11 09:11:09 +10:00
```console
$ npm install webpack-auto-inject-version --save-dev
```
2017-04-13 07:47:11 +10:00
# Table of Contents
2017-04-13 07:50:14 +10:00
[What it does](#user-content-what-it-does) <br>
[How to use](#user-content-how-to-use) <br>
[Available options](#user-content-available-options) <br>
[Output examples](#user-content-output-examples)
2017-04-13 08:40:22 +10:00
[Change log](#user-content-change-log)
2017-04-13 07:47:11 +10:00
# What it does
2016-10-21 18:32:35 +11:00
Auto Inject Version (AIV) can:
- inject version from package.json into every bundle file as a comment ( at the top )
2017-04-11 09:11:09 +10:00
- inject version from package.json into any place in your HTML by special tag `[AIV]{version}[/AIV]`
- inject version from package.json into any place in CSS/JS file by special tag `[AIV]{version}[/AIV]`
- auto increase package.json version by --env.major, --env.minor, --env.patch passed into webpack
2016-10-21 18:32:35 +11:00
2016-10-20 17:58:19 +11:00
2016-10-20 19:32:26 +11:00
2017-04-13 07:47:11 +10:00
# How to use
It's easy to set it up, all you need is:
* use WebpackAutoInject in webpack plugins
* pass config as a parameter, or leave it blank as all options are "on" by default.
2016-10-20 19:32:26 +11:00
### More info
* Date format masks [dateFormat](https://github.com/felixge/node-dateformat#mask-options)
+ Version management [semver](https://github.com/npm/node-semver)
### Simple config example ( in webpack.conf.js )
2017-04-13 07:47:11 +10:00
```js
var WebpackAutoInject = require('webpack-auto-inject-version');
...
2016-10-20 19:32:26 +11:00
module.exports = {
2017-04-13 07:47:11 +10:00
...
2016-10-20 17:58:19 +11:00
plugins: [
2017-04-11 09:11:09 +10:00
new WebpackAutoInject({
// options
// example:
components: {
AutoIncreaseVersion: false
}
})
2016-10-20 17:58:19 +11:00
]
2016-10-20 19:32:26 +11:00
}
```
### Full config example ( in webpack.conf.js )
```
module.exports = {
...
plugins: [
new WebpackAutoInject({
NAME: 'AIV custom name',
SHORT: 'CUSTOM',
SILENT: false,
PACKAGE_JSON_PATH: './package.json',
components: {
AutoIncreaseVersion: true,
InjectAsComment: true,
InjectByTag: true
},
componentsOptions: {
AutoIncreaseVersion: {
runInWatchMode: false // it will increase version with every single build!
},
InjectAsComment: {
tag: 'Version: {version} - {date}',
dateFormat: 'h:MM:ss TT'
},
InjectByTag: {
fileRegex: /\.+/,
dateFormat: 'h:MM:ss TT'
}
},
LOGS_TEXT: {
AIS_START: 'DEMO AIV started'
}
})
]
}
```
2016-10-20 19:32:26 +11:00
### Inject by tag example
```
<body>
<span>
[AIV]{version}[/AIV]
</span>
<span>
[AIV]{date}[/AIV]
</span>
<span>
[AIV]{version}_{date}[/AIV]
</span>
<span>
[AIV]V:{version} Date:{date}[/AIV]
</span>
</body>
```
2017-04-13 07:47:11 +10:00
# Available options
2016-10-20 19:32:26 +11:00
2017-04-11 09:11:09 +10:00
### components.AutoIncreaseVersion
2016-10-20 19:32:26 +11:00
Auto increase package.json number. <br>
This option requires extra argument to be sent to webpack build. <br>
2016-10-21 18:32:35 +11:00
It happens before anything else to make sure that your new version is injected into your files.<br>
2017-04-11 09:11:09 +10:00
Arguments: --env.major --env.minor --env.patch<br><br>
2016-10-20 19:32:26 +11:00
Example for package.json run type, npm run start => ( 1.2.10 to 2.0.0 )
```json
"version" : "1.2.10",
"scripts": {
2017-04-11 09:11:09 +10:00
"start": "webpack --env.major"
2016-10-20 19:32:26 +11:00
}
```
To enable watch mode:
```
plugins: [
new WebpackAutoInject({
...
components: {
AutoIncreaseVersion: true,
...
},
componentsOptions: {
AutoIncreaseVersion: {
runInWatchMode: false // it will increase version with every single build!
}
}
})
]
```
2016-10-20 19:32:26 +11:00
Default: true
2017-04-11 09:11:09 +10:00
### components.InjectByTag
2016-10-21 18:32:35 +11:00
Inject version number into your file<br>
Version will replace the <{version}> tag.<br>
2016-10-20 19:32:26 +11:00
```html
2017-04-11 09:11:09 +10:00
<span>My awesome project | [AIV]{version}[/AIV]</span>
2016-10-20 19:32:26 +11:00
```
2016-10-21 18:32:35 +11:00
```js
2017-04-11 09:11:09 +10:00
var version = '[AIV]{version}[/AIV]';
2016-10-21 18:32:35 +11:00
```
2016-10-20 19:32:26 +11:00
Default: true
2017-04-11 09:11:09 +10:00
### components.InjectAsComment
This will inject your version as a comment into any css,js,html file.<br>
2017-04-13 08:40:22 +10:00
You can change what is injected into the file by changing componentsOptions.InjectAsComment.tag.
Currently only 2 tags are supported:
* {version}
* {date} ( current date )
Example:
``` javascript
...
plugins: [
...
new WebpackAutoInject({
PACKAGE_JSON_PATH: './package.json',
components: {
...
InjectAsComment: true
},
componentsOptions: {
...
InjectAsComment: {
tag: 'Build version: {version} - {date}', // default
dateFormat: 'dddd, mmmm dS, yyyy, h:MM:ss TT' // default
2017-04-13 08:40:22 +10:00
}
})
]
```
2017-04-11 09:11:09 +10:00
Default: true
2016-10-20 19:32:26 +11:00
2017-04-13 07:50:14 +10:00
# Output-examples
2017-04-13 07:47:11 +10:00
AIV can inject version number for all your bundle files (css,js,html).<br><br>
```js
// [AIV] Build version: 1.0.10
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
```
<br><br>
Example html:
```html
<!-- [AIV] Build version: 1.0.10 -->
<!DOCTYPE html>
<html lang="en">
```
2017-04-13 08:40:22 +10:00
# Change log
## [1.0.0] - 25/08/2017
- Date format can now be specified for InjectAsComment
- Date format can now be specified for InjectByTag
- Webpack WATCH support added
- Root SILENT option added
- Minor fixes
## [0.5.14] - 12/04/2017
- Remove babel polyfills from webpack build as it was causing issues if babel was already used in project
2017-04-13 08:40:22 +10:00
## [0.5.13] - 12/04/2017
- Tag from InjectAsComment can now be configured by options ( componentsOptions.InjectAsComment.tag )
- Default tag template for InjectAsComment has change
## [0.5.12] - 12/04/2017
- Fix dependency missing issue
- Remove export as object with .default as a class