Add InjectAsComment tag option

This commit is contained in:
radswiat 2017-04-12 23:40:22 +01:00
parent 0c334edfd8
commit 359037d7a1
12 changed files with 1069 additions and 710 deletions

View File

@ -12,7 +12,7 @@ $ npm install webpack-auto-inject-version --save-dev
[How to use](#user-content-how-to-use) <br>
[Available options](#user-content-available-options) <br>
[Output examples](#user-content-output-examples)
[Change log](#user-content-change-log)
@ -81,11 +81,33 @@ Default: true
### components.InjectAsComment
This will inject your version as a comment into any css,js,html file.<br>
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
}
})
]
```
Default: true
# Output-examples
AIV can inject version number for all your bundle files (css,js,html).<br><br>
```js
@ -103,3 +125,11 @@ Example html:
```
# Change log
## [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

View File

@ -1,4 +1,4 @@
// [AIV] Build version: 0.13.4
// [AIV] Build version: 0.13.4 - Wednesday, April 12th, 2017, 11:34:31 PM
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
@ -64,20 +64,14 @@
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = "<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Title</title></head><body><span>My awesome project | 0.13.4></span></body></html>"
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
var html = __webpack_require__(0);
var html = __webpack_require__(1);
/**
* Sample code
@ -90,5 +84,18 @@ var test = function(val) {
test(myVariable);
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = "<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Title</title></head><body><span>My awesome project | 0.13.4></span></body></html>"
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(0);
/***/ })
/******/ ]);

View File

@ -11,6 +11,7 @@
"author": "Radoslaw Swiat",
"license": "ISC",
"devDependencies": {
"html-loader": "^0.4.5",
"html-minify-loader": "^1.1.0",
"raw-loader": "^0.5.1",
"webpack": "^2.3.3",

View File

@ -1,12 +1,12 @@
var path = require('path');
// Require WebpackAutoInject from npm installed modules ( preferred )
var WebpackAutoInject = require('webpack-auto-inject-version');
// var WebpackAutoInject = require('webpack-auto-inject-version');
// Require WebpackAutoInject from dist - dev purpose only ( do not use the below line )
// var WebpackAutoInject = require('../dist/WebpackAutoInjectVersion');
var WebpackAutoInject = require('../dist/WebpackAutoInjectVersion');
module.exports = {
entry: {
index: './src/main.js'
index: ['./src/main.js']
},
resolve: {
extensions: ['.js', '.html']

File diff suppressed because it is too large Load Diff

View File

@ -1,37 +1,38 @@
{
"name": "webpack-auto-inject-version",
"version": "0.5.12",
"repository": "radswiat/webpack-auto-inject-version",
"description": "Webpack plugin for auto inject version from package.json",
"main": "dist/WebpackAutoInjectVersion.js",
"scripts": {
"start": "babel-node tools/compile.js"
},
"author": "Radoslaw Swiat",
"license": "ISC",
"devDependencies": {
"chalk": "^1.1.3",
"lodash": "^4.17.4",
"optimist": "^0.6.1",
"semver": "^5.3.0",
"babel-cli": "^6.10.1",
"babel-core": "^6.24.1",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.4.0",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-node5": "^11.0.1",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.22.0",
"gutil": "^1.6.4",
"webpack": "^2.3.3",
"webpack-node-externals": "^1.5.4",
"eslint": "^2.7.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-jsx-control-statements": "^2.1.1",
"eslint-plugin-react": "^4.2.3"
}
"name": "webpack-auto-inject-version",
"version": "0.5.12",
"repository": "radswiat/webpack-auto-inject-version",
"description": "Webpack plugin for auto inject version from package.json",
"main": "dist/WebpackAutoInjectVersion.js",
"scripts": {
"start": "babel-node tools/compile.js"
},
"author": "Radoslaw Swiat",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.24.1",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.4.0",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-node5": "^11.0.1",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^1.1.3",
"dateformat": "^2.0.0",
"eslint": "^2.7.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-jsx-control-statements": "^2.1.1",
"eslint-plugin-react": "^4.2.3",
"gutil": "^1.6.4",
"lodash": "^4.17.4",
"optimist": "^0.6.1",
"semver": "^5.3.0",
"webpack": "^2.3.3",
"webpack-node-externals": "^1.5.4"
}
}

View File

@ -1,6 +1,8 @@
import path from 'path';
import config from 'config';
import log from 'core/log';
import tags from './tags';
import chalk from 'chalk';
const endOfLine = require('os').EOL;
@ -29,12 +31,15 @@ export default class InjectAsComment {
let asset = compilation.assets[basename];
switch (ext) {
case '.js' :
console.log(chalk.blue.bold('js'));
this.injectIntoJs(asset);
break;
case '.html' :
console.log(chalk.blue.bold('html'));
this.injectIntoHtml(asset);
break;
case '.css' :
console.log(chalk.blue.bold('css'));
this.injectIntoCss(asset);
break;
default:
@ -47,21 +52,34 @@ export default class InjectAsComment {
return new Promise((resolve) => { resolve(); });
}
parseTags(baseOpen, baseClose) {
let tagPattern = this.context.config.componentsOptions.InjectAsComment.tag;
tagPattern = tagPattern.replace(/(\{([a-zA-Z]+)\})/g, (tag) => {
let tagName = tag.replace(/(\{|\})/g, '');
if (typeof tags[tagName] === 'function') {
return tags[tagName](this.context);
}
log.error(`unsupported tag in componentsOptions.InjectAsComment.tag [${tagName}]`);
return tag;
});
return `${baseOpen} ${tagPattern} ${baseClose}`;
}
injectIntoCss(asset) {
let modAsset = `/** [${config.SHORT}] Build version: ${this.context.version} **/ `;
let modAsset = this.parseTags(`/** [${config.SHORT}] `, ' **/ ');
modAsset += `${endOfLine} ${asset.source()} `;
asset.source = () => modAsset;
}
injectIntoHtml(asset) {
let modAsset = `<!-- [${config.SHORT}] Build version: ${this.context.version} --> `;
let modAsset = this.parseTags(`<!-- [${config.SHORT}] `, ' --> ');
modAsset += `${endOfLine} ${asset.source()} `;
asset.source = () => modAsset;
}
injectIntoJs(asset) {
let modAsset = `// [${config.SHORT}] Build version: ${this.context.version} `;
modAsset = `${endOfLine} ${asset.source()} `;
let modAsset = this.parseTags(`// [${config.SHORT}] `, ' ');
modAsset += `${endOfLine} ${asset.source()} `;
asset.source = () => modAsset;
}
}

View File

@ -0,0 +1,10 @@
import dateFormat from 'dateformat';
export default {
version: (context) => {
return context.version;
},
date: () => {
return dateFormat(new Date(), 'dddd, mmmm dS, yyyy, h:MM:ss TT');
}
};

View File

@ -6,6 +6,9 @@ export default {
InjectByTag: true
},
componentsOptions: {
InjectAsComment: {
tag: 'Build version: {version} - {date}'
},
InjectByTag: {
fileRegex: /\.+/
}

View File

@ -6,9 +6,9 @@ import log from 'core/log';
import { merge, transform } from 'lodash';
// import sub components
import AutoIncreaseVersion from 'components/auto-increase-version';
import InjectAsComment from 'components/inject-as-comment';
import InjectByTag from 'components/inject-by-tag';
import AutoIncreaseVersion from 'components/auto-increase-version/auto-increase-version';
import InjectAsComment from 'components/inject-as-comment/inject-as-comment';
import InjectByTag from 'components/inject-by-tag/inject-by-tag';
export default class WebpackAutoInject {