Add InjectAsComment tag option
This commit is contained in:
parent
0c334edfd8
commit
359037d7a1
12 changed files with 1069 additions and 710 deletions
34
README.md
34
README.md
|
@ -12,7 +12,7 @@ $ npm install webpack-auto-inject-version --save-dev
|
||||||
[How to use](#user-content-how-to-use) <br>
|
[How to use](#user-content-how-to-use) <br>
|
||||||
[Available options](#user-content-available-options) <br>
|
[Available options](#user-content-available-options) <br>
|
||||||
[Output examples](#user-content-output-examples)
|
[Output examples](#user-content-output-examples)
|
||||||
|
[Change log](#user-content-change-log)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -81,11 +81,33 @@ Default: true
|
||||||
|
|
||||||
### components.InjectAsComment
|
### components.InjectAsComment
|
||||||
This will inject your version as a comment into any css,js,html file.<br>
|
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
|
Default: true
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Output-examples
|
# Output-examples
|
||||||
AIV can inject version number for all your bundle files (css,js,html).<br><br>
|
AIV can inject version number for all your bundle files (css,js,html).<br><br>
|
||||||
```js
|
```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
|
||||||
|
|
25
demo/dist/index-bundle.js
vendored
25
demo/dist/index-bundle.js
vendored
|
@ -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
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -64,20 +64,14 @@
|
||||||
/******/ __webpack_require__.p = "";
|
/******/ __webpack_require__.p = "";
|
||||||
/******/
|
/******/
|
||||||
/******/ // Load entry module and return exports
|
/******/ // Load entry module and return exports
|
||||||
/******/ return __webpack_require__(__webpack_require__.s = 1);
|
/******/ return __webpack_require__(__webpack_require__.s = 2);
|
||||||
/******/ })
|
/******/ })
|
||||||
/************************************************************************/
|
/************************************************************************/
|
||||||
/******/ ([
|
/******/ ([
|
||||||
/* 0 */
|
/* 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__) {
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
var html = __webpack_require__(0);
|
var html = __webpack_require__(1);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sample code
|
* Sample code
|
||||||
|
@ -90,5 +84,18 @@ var test = function(val) {
|
||||||
test(myVariable);
|
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);
|
||||||
|
|
||||||
|
|
||||||
/***/ })
|
/***/ })
|
||||||
/******/ ]);
|
/******/ ]);
|
|
@ -11,6 +11,7 @@
|
||||||
"author": "Radoslaw Swiat",
|
"author": "Radoslaw Swiat",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"html-loader": "^0.4.5",
|
||||||
"html-minify-loader": "^1.1.0",
|
"html-minify-loader": "^1.1.0",
|
||||||
"raw-loader": "^0.5.1",
|
"raw-loader": "^0.5.1",
|
||||||
"webpack": "^2.3.3",
|
"webpack": "^2.3.3",
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
var path = require('path');
|
var path = require('path');
|
||||||
// Require WebpackAutoInject from npm installed modules ( preferred )
|
// 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 )
|
// 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 = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
index: './src/main.js'
|
index: ['./src/main.js']
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.html']
|
extensions: ['.js', '.html']
|
||||||
|
|
1621
dist/WebpackAutoInjectVersion.js
vendored
1621
dist/WebpackAutoInjectVersion.js
vendored
File diff suppressed because it is too large
Load diff
17
package.json
17
package.json
|
@ -10,10 +10,6 @@
|
||||||
"author": "Radoslaw Swiat",
|
"author": "Radoslaw Swiat",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"chalk": "^1.1.3",
|
|
||||||
"lodash": "^4.17.4",
|
|
||||||
"optimist": "^0.6.1",
|
|
||||||
"semver": "^5.3.0",
|
|
||||||
"babel-cli": "^6.10.1",
|
"babel-cli": "^6.10.1",
|
||||||
"babel-core": "^6.24.1",
|
"babel-core": "^6.24.1",
|
||||||
"babel-eslint": "^6.0.0",
|
"babel-eslint": "^6.0.0",
|
||||||
|
@ -24,14 +20,19 @@
|
||||||
"babel-preset-node5": "^11.0.1",
|
"babel-preset-node5": "^11.0.1",
|
||||||
"babel-preset-react": "^6.5.0",
|
"babel-preset-react": "^6.5.0",
|
||||||
"babel-preset-stage-2": "^6.22.0",
|
"babel-preset-stage-2": "^6.22.0",
|
||||||
"gutil": "^1.6.4",
|
"chalk": "^1.1.3",
|
||||||
"webpack": "^2.3.3",
|
"dateformat": "^2.0.0",
|
||||||
"webpack-node-externals": "^1.5.4",
|
|
||||||
"eslint": "^2.7.0",
|
"eslint": "^2.7.0",
|
||||||
"eslint-config-airbnb": "^6.2.0",
|
"eslint-config-airbnb": "^6.2.0",
|
||||||
"eslint-loader": "^1.5.0",
|
"eslint-loader": "^1.5.0",
|
||||||
"eslint-plugin-babel": "^3.2.0",
|
"eslint-plugin-babel": "^3.2.0",
|
||||||
"eslint-plugin-jsx-control-statements": "^2.1.1",
|
"eslint-plugin-jsx-control-statements": "^2.1.1",
|
||||||
"eslint-plugin-react": "^4.2.3"
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import config from 'config';
|
import config from 'config';
|
||||||
import log from 'core/log';
|
import log from 'core/log';
|
||||||
|
import tags from './tags';
|
||||||
|
import chalk from 'chalk';
|
||||||
|
|
||||||
const endOfLine = require('os').EOL;
|
const endOfLine = require('os').EOL;
|
||||||
|
|
||||||
|
@ -29,12 +31,15 @@ export default class InjectAsComment {
|
||||||
let asset = compilation.assets[basename];
|
let asset = compilation.assets[basename];
|
||||||
switch (ext) {
|
switch (ext) {
|
||||||
case '.js' :
|
case '.js' :
|
||||||
|
console.log(chalk.blue.bold('js'));
|
||||||
this.injectIntoJs(asset);
|
this.injectIntoJs(asset);
|
||||||
break;
|
break;
|
||||||
case '.html' :
|
case '.html' :
|
||||||
|
console.log(chalk.blue.bold('html'));
|
||||||
this.injectIntoHtml(asset);
|
this.injectIntoHtml(asset);
|
||||||
break;
|
break;
|
||||||
case '.css' :
|
case '.css' :
|
||||||
|
console.log(chalk.blue.bold('css'));
|
||||||
this.injectIntoCss(asset);
|
this.injectIntoCss(asset);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
@ -47,21 +52,34 @@ export default class InjectAsComment {
|
||||||
return new Promise((resolve) => { resolve(); });
|
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) {
|
injectIntoCss(asset) {
|
||||||
let modAsset = `/** [${config.SHORT}] Build version: ${this.context.version} **/ `;
|
let modAsset = this.parseTags(`/** [${config.SHORT}] `, ' **/ ');
|
||||||
modAsset += `${endOfLine} ${asset.source()} `;
|
modAsset += `${endOfLine} ${asset.source()} `;
|
||||||
asset.source = () => modAsset;
|
asset.source = () => modAsset;
|
||||||
}
|
}
|
||||||
|
|
||||||
injectIntoHtml(asset) {
|
injectIntoHtml(asset) {
|
||||||
let modAsset = `<!-- [${config.SHORT}] Build version: ${this.context.version} --> `;
|
let modAsset = this.parseTags(`<!-- [${config.SHORT}] `, ' --> ');
|
||||||
modAsset += `${endOfLine} ${asset.source()} `;
|
modAsset += `${endOfLine} ${asset.source()} `;
|
||||||
asset.source = () => modAsset;
|
asset.source = () => modAsset;
|
||||||
}
|
}
|
||||||
|
|
||||||
injectIntoJs(asset) {
|
injectIntoJs(asset) {
|
||||||
let modAsset = `// [${config.SHORT}] Build version: ${this.context.version} `;
|
let modAsset = this.parseTags(`// [${config.SHORT}] `, ' ');
|
||||||
modAsset = `${endOfLine} ${asset.source()} `;
|
modAsset += `${endOfLine} ${asset.source()} `;
|
||||||
asset.source = () => modAsset;
|
asset.source = () => modAsset;
|
||||||
}
|
}
|
||||||
}
|
}
|
10
src/components/inject-as-comment/tags.js
Normal file
10
src/components/inject-as-comment/tags.js
Normal 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');
|
||||||
|
}
|
||||||
|
};
|
|
@ -6,6 +6,9 @@ export default {
|
||||||
InjectByTag: true
|
InjectByTag: true
|
||||||
},
|
},
|
||||||
componentsOptions: {
|
componentsOptions: {
|
||||||
|
InjectAsComment: {
|
||||||
|
tag: 'Build version: {version} - {date}'
|
||||||
|
},
|
||||||
InjectByTag: {
|
InjectByTag: {
|
||||||
fileRegex: /\.+/
|
fileRegex: /\.+/
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,9 +6,9 @@ import log from 'core/log';
|
||||||
import { merge, transform } from 'lodash';
|
import { merge, transform } from 'lodash';
|
||||||
|
|
||||||
// import sub components
|
// import sub components
|
||||||
import AutoIncreaseVersion from 'components/auto-increase-version';
|
import AutoIncreaseVersion from 'components/auto-increase-version/auto-increase-version';
|
||||||
import InjectAsComment from 'components/inject-as-comment';
|
import InjectAsComment from 'components/inject-as-comment/inject-as-comment';
|
||||||
import InjectByTag from 'components/inject-by-tag';
|
import InjectByTag from 'components/inject-by-tag/inject-by-tag';
|
||||||
|
|
||||||
export default class WebpackAutoInject {
|
export default class WebpackAutoInject {
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue