chushihua
This commit is contained in:
li
+2
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
jsconfig.json
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Nuno Rodrigues
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
# Last Call Webpack Plugin
|
||||
|
||||
A Webpack plugin that allows you to transform \ modify assets just before Webpack emits them.
|
||||
|
||||
## What does the plugin do?
|
||||
|
||||
It allows you to transform \ modify Webpack assets just before Webpack emits them (writes them to files or memory in case you are using something like Webpack dev server).
|
||||
|
||||
It can be used for example to:
|
||||
* Prefix a ``` /* Author: John Doe */ ``` comment on all the .js files Webpack generates.
|
||||
* Run some final optimization on all .css files Webpack generates.
|
||||
|
||||
## Installation:
|
||||
|
||||
Using npm:
|
||||
```shell
|
||||
$ npm install --save-dev last-call-webpack-plugin
|
||||
```
|
||||
|
||||
## Configuration:
|
||||
|
||||
The plugin can receive the following options:
|
||||
* assetProcessors: An Array of objects that describe asset processors:
|
||||
* regExp: A regular expression to match the asset name that the processor handles.
|
||||
* processor: A function with the signature of ``` function(assetName, webpackAssetObject, assets) ``` that returns a Promise. If the Promise returns a result this result will replace the assets content.
|
||||
* phase: The webpack compilation phase that at which the processor should be called. Default value is `compilation.optimize-assets`. Can be one of the following values:
|
||||
* `compilation.optimize-chunk-assets`
|
||||
* `compilation.optimize-assets`
|
||||
* `emit`
|
||||
* onStart: A function with the signature of ``` function(assets, assetsAndProcessors, webpackCompilationObject) ``` that will be called before the plugin starts calling the assets processors.
|
||||
* onEnd: A function with the signature of ``` function(error) ``` that will be called after the plugin calls all the assets processors. If no errors occurred the ``` error ``` parameter will be undefined.
|
||||
* canPrint: A boolean indicating if the plugin can print messages to the console, defaults to `true`.
|
||||
|
||||
Note: An environment supporting Promises or a Promise polyfill is needed for this plugin to be used.
|
||||
|
||||
## Example:
|
||||
|
||||
``` javascript
|
||||
var cssnano = require('cssnano');
|
||||
var LastCallWebpackPlugin = require('last-call-webpack-plugin');
|
||||
module.exports = {
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin("styles.css"),
|
||||
new LastCallWebpackPlugin({
|
||||
assetProcessors: [{
|
||||
regExp: /\.js$/,
|
||||
processor: (assetName, asset) => Promise.resolve('// Author: John Doe \n' + asset.source())
|
||||
}, {
|
||||
regExp: /\.css$/,
|
||||
processor: (assetName, asset) => cssnano.process(asset.source())
|
||||
.then(r => r.css)
|
||||
}],
|
||||
onStart: () => console.log('Starting to process assets.'),
|
||||
onEnd: (err) => console.log(err ? 'Error: ' + err : 'Finished processing assets.'),
|
||||
canPrint: true
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Assets manipulation
|
||||
|
||||
The `processor` method is supplied an `assets` object that allows asset manipulation via the `setAsset(assetName, assetValue)` method. If `assetValue` is null the asset will be deleted. This object can be used to generate aditional assets (like source maps) or rename the an asset (create a new asset and delete the current one).
|
||||
|
||||
Example:
|
||||
|
||||
``` javascript
|
||||
var cssnano = require('cssnano');
|
||||
var LastCallWebpackPlugin = require('last-call-webpack-plugin');
|
||||
module.exports = {
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin("styles.css"),
|
||||
new LastCallWebpackPlugin({
|
||||
assetProcessors: [{
|
||||
regExp: /\.css$/,
|
||||
processor: (assetName, asset, assets) => {
|
||||
assets.setAsset(assetName + '.map', null); // Delete the <assetName>.map asset.
|
||||
assets.setAsset(assetName + '.log', 'All OK'); // Add the <assetName>.log asset with the content 'All OK'.
|
||||
return cssnano
|
||||
.process(asset.source())
|
||||
.then(r => r.css)
|
||||
}
|
||||
}],
|
||||
onStart: () => console.log('Starting to process assets.'),
|
||||
onEnd: (err) => console.log(err ? 'Error: ' + err : 'Finished processing assets.'),
|
||||
canPrint: true
|
||||
})
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
The `assets` object also has a `getAsset(assetName)` method to get the content of an asset (returns undefined in case the asset does not exist).
|
||||
|
||||
## License
|
||||
|
||||
MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
+209
@@ -0,0 +1,209 @@
|
||||
var assign = require('lodash/assign');
|
||||
var each = require('lodash/each');
|
||||
var find = require('lodash/find');
|
||||
var isArray = require('lodash/isArray');
|
||||
var isFunction = require('lodash/isFunction');
|
||||
var isRegExp = require('lodash/isRegExp');
|
||||
var keys = require('lodash/keys');
|
||||
var values = require('lodash/values');
|
||||
var webpackSources = require('webpack-sources');
|
||||
|
||||
function EMPTY_FUNC() {};
|
||||
|
||||
var PHASE = {
|
||||
OPTIMIZE_CHUNK_ASSETS: 'compilation.optimize-chunk-assets',
|
||||
OPTIMIZE_ASSETS: 'compilation.optimize-assets',
|
||||
EMIT: 'emit'
|
||||
};
|
||||
var PHASES = values(PHASE);
|
||||
|
||||
function AssetsManipulation(lastCallWebpackPlugin, compilation) {
|
||||
this.lastCallWebpackPlugin = lastCallWebpackPlugin;
|
||||
this.compilation = compilation;
|
||||
}
|
||||
|
||||
AssetsManipulation.prototype.setAsset = function(assetName, assetValue, immediate) {
|
||||
this.lastCallWebpackPlugin.setAsset(assetName, assetValue, immediate, this.compilation);
|
||||
};
|
||||
|
||||
AssetsManipulation.prototype.getAsset = function(assetName) {
|
||||
var asset = assetName && this.compilation.assets[assetName] && this.compilation.assets[assetName].source();
|
||||
return asset || undefined;
|
||||
};
|
||||
|
||||
function LastCallWebpackPlugin(options) {
|
||||
this.options = assign(
|
||||
{
|
||||
assetProcessors: [],
|
||||
onStart: EMPTY_FUNC,
|
||||
onEnd: EMPTY_FUNC,
|
||||
canPrint: true
|
||||
},
|
||||
options || {}
|
||||
);
|
||||
|
||||
if (!isArray(this.options.assetProcessors)) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.assetProcessors (must be an Array).');
|
||||
}
|
||||
|
||||
each(this.options.assetProcessors, function (processor, index) {
|
||||
if (!processor) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.assetProcessors[' + String(index) + '] (must be an object).');
|
||||
}
|
||||
if (!isRegExp(processor.regExp)) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.assetProcessors[' + String(index) + '].regExp (must be an regular expression).');
|
||||
}
|
||||
if (!isFunction(processor.processor)) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.assetProcessors[' + String(index) + '].processor (must be a function).');
|
||||
}
|
||||
if (processor.phase === undefined) {
|
||||
processor.phase = PHASE.OPTIMIZE_ASSETS;
|
||||
}
|
||||
if (!find(PHASES, function(p) { return p === processor.phase; })) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.assetProcessors[' + String(index) + '].phase (must be on of: ' + PHASES.join(', ') + ').');
|
||||
}
|
||||
});
|
||||
|
||||
if (!isFunction(this.options.onStart)) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.onStart (must be a function).');
|
||||
}
|
||||
if (!isFunction(this.options.onEnd)) {
|
||||
throw new Error('LastCallWebpackPlugin Error: invalid options.onEnd (must be a function).');
|
||||
}
|
||||
|
||||
this.initCompile();
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.initCompile = function() {
|
||||
this.deleteAssetsMap = {};
|
||||
}
|
||||
|
||||
LastCallWebpackPlugin.prototype.print = function() {
|
||||
if (this.options.canPrint) {
|
||||
console.log.apply(console, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.onAssetError = function(assetName, asset, err) {
|
||||
this.print('Error processing file: ' + assetName);
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.getAssetsAndProcessors = function(assets, phase) {
|
||||
var assetProcessors = this.options.assetProcessors;
|
||||
var assetNames = keys(assets);
|
||||
var assetsAndProcessors = [];
|
||||
|
||||
each(assetNames, function (assetName) {
|
||||
each(assetProcessors, function(assetProcessor) {
|
||||
if (assetProcessor.phase === phase) {
|
||||
var regExpResult = assetProcessor.regExp.exec(assetName);
|
||||
assetProcessor.regExp.lastIndex = 0;
|
||||
if (regExpResult) {
|
||||
var assetAndProcessor = {
|
||||
assetName: assetName,
|
||||
regExp: assetProcessor.regExp,
|
||||
processor: assetProcessor.processor,
|
||||
regExpResult: regExpResult,
|
||||
};
|
||||
assetsAndProcessors.push(assetAndProcessor);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return assetsAndProcessors;
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.createAsset = function(content, originalAsset) {
|
||||
return new webpackSources.RawSource(content);
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.process = function(compilation, phase, callback) {
|
||||
var self = this;
|
||||
|
||||
var assetsAndProcessors = this.getAssetsAndProcessors(compilation.assets, phase);
|
||||
if (assetsAndProcessors.length <= 0) {
|
||||
return callback();
|
||||
}
|
||||
|
||||
this.options.onStart(assetsAndProcessors, compilation, phase);
|
||||
|
||||
var hasErrors = false;
|
||||
var promises = [];
|
||||
|
||||
var assetsManipulationObject = new AssetsManipulation(self, compilation);
|
||||
|
||||
each(assetsAndProcessors, function(assetAndProcessor) {
|
||||
var asset = compilation.assets[assetAndProcessor.assetName];
|
||||
var promise = assetAndProcessor
|
||||
.processor(assetAndProcessor.assetName, asset, assetsManipulationObject)
|
||||
.then(function (result) {
|
||||
if (result !== undefined) {
|
||||
self.setAsset(assetAndProcessor.assetName, result, false, compilation);
|
||||
}
|
||||
})
|
||||
.catch(function(err) {
|
||||
hasErrors = true;
|
||||
self.onAssetError(assetAndProcessor.assetName, asset, err);
|
||||
throw err;
|
||||
});
|
||||
promises.push(promise);
|
||||
});
|
||||
|
||||
return Promise.all(promises)
|
||||
.then(function () {
|
||||
self.options.onEnd(assetsAndProcessors, compilation, phase);
|
||||
callback();
|
||||
})
|
||||
.catch(function (err) {
|
||||
self.options.onEnd(assetsAndProcessors, compilation, phase, err);
|
||||
callback(err);
|
||||
});
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.setAsset = function(assetName, assetValue, immediate, compilation) {
|
||||
if (assetName) {
|
||||
if (assetValue === null) {
|
||||
this.deleteAssetsMap[assetName] = true;
|
||||
if (immediate) {
|
||||
delete compilation.assets[assetName];
|
||||
}
|
||||
} else {
|
||||
if (assetValue !== undefined) {
|
||||
compilation.assets[assetName] = this.createAsset(assetValue, compilation.assets[assetName]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.deleteAssets = function(compilation) {
|
||||
if (this.deleteAssetsMap && compilation) {
|
||||
each(keys(this.deleteAssetsMap), function(key) {
|
||||
delete compilation.assets[key];
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.apply = function(compiler) {
|
||||
var self = this;
|
||||
|
||||
compiler.plugin('compilation', function(compilation, params) {
|
||||
self.initCompile();
|
||||
|
||||
compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
|
||||
self.process(compilation, PHASE.OPTIMIZE_CHUNK_ASSETS, callback);
|
||||
});
|
||||
compilation.plugin("optimize-assets", function(chunks, callback) {
|
||||
self.process(compilation, PHASE.OPTIMIZE_ASSETS, callback);
|
||||
});
|
||||
});
|
||||
compiler.plugin('emit', function(compilation, callback) {
|
||||
self.process(compilation, PHASE.EMIT, callback);
|
||||
self.deleteAssets(compilation);
|
||||
});
|
||||
};
|
||||
|
||||
LastCallWebpackPlugin.prototype.PHASE = PHASE;
|
||||
LastCallWebpackPlugin.PHASE = PHASE;
|
||||
|
||||
module.exports = LastCallWebpackPlugin;
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "last-call-webpack-plugin",
|
||||
"version": "2.1.2",
|
||||
"author": "Nuno Rodrigues",
|
||||
"description": "A Webpack plugin that allows to transform \\ modify assets just before Webpack emits them.",
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.4",
|
||||
"webpack-sources": "^1.0.1"
|
||||
},
|
||||
"main": "index.js",
|
||||
"homepage": "http://github.com/NMFR/last-call-webpack-plugin",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/NMFR/last-call-webpack-plugin.git"
|
||||
},
|
||||
"keywords": [
|
||||
"transform",
|
||||
"modify",
|
||||
"manipulate",
|
||||
"optimize",
|
||||
"prefix",
|
||||
"sufix",
|
||||
"webpack",
|
||||
"assets"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
Reference in New Issue
Block a user