background:
Project-based native js, useless to any scaffolding and framework, but also need to package compression.
js projects declared some global variables for other js call.
At this time if webpack package, based on webpack characteristics, will function nesting a layer of large, will become js variable in a local, not for other js call.
Therefore abandoned webpack. Selected uglifyjs.
the reason:
webpack is also useful to uglifyjs in the webpack version: uglifyjs-webpack-plugin.
Packing way:
Package source file: dev folder js file ====> target file: js folder.
Directory Structure
use:
1, if the default is es5 uglify-js official website is this branch.
2, if it is es6 use uglify-es official website harmony branch downloaded is uglify-es.
uglifyjs official website: https://github.com/mishoo/UglifyJS2
step:
First make sure your computer has not installed node, which node is activated.
1, download uglifyjs here I downloaded version es.
npm install uglify-es -D2, write a package.json, following package.json can be downloaded directly npm i the first step is omitted.
I wrote scripts inside the command
I think the package under development can be used to debug the sourceMap (map),
Packaged compressed under production.
My entry file named the entry.js
{
"name": "ocplayermin",
"version": "1.0.0",
"description": "ocplayer min version",
"main": "entry.js",
"scripts": {
"build_min": "NODE_ENV=production node entry.js --progress",
"build_min_dev": "NODE_ENV=development node entry.js --progress"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"uglify-es": "^3.3.9",
"uglify-js": "^3.7.4"
}
}
Note: NODE_ENV is not compatible with the windows need to install cross-env plug: npm install cross-env --save-dev
After installing and build_min_dev build_min plus cross-env can.
3, entry.js Code
It intends to file in the dev package js js file to file.
Code logic:
- 1, through all the js file dev folder, access to the file name and the old path.
- 2, generate js folder, if no js folder is created, the file path of the new generation.
- 3, development with UglifyJS.minify the compressed file generating sourceMap.
- 4, lower production due to the development environment created under the .js.map file, delete .js.map here, generated .js file.
Problems encountered:
Because when the browser reads, map file source map reading needs and js is the same directory so you need to port the front end of the path, assigned to .js.map.
For example: Address: 127.0.0.1: 5500 / minversion / index.html;
Recommend a nice editor (with vcode editor open with live server to start the project, the default port 5500)
Js read path tip end: 127.0.0.1: 5500 / minversion / js / xxx.js;
Map generation path have to be 127.0.0.1:5500/minversion/js/xxx.js.map; if './js/xxx.js.map' is not read in.
I created a special access config.json constants, I will write in front of the port here declared: PLUGIN_URL just change this, entry.js will be able to read.
On the source map may not quite know Tell me what network documentation.
config.json
{"pluginUrl":"http://127.0.0.1:5500/minversion"}
entry.js
the require path = const ( 'path');
const the require FS = ( 'FS');
const = UglifyJS the require ( "uglify-ES"); // compatible ES6
// = var UglifyJS the require ( "JS-uglify"); ES5 //
const ORIGIN_PATH = '/ dev';
'.' = const + ORIGIN_DIR ORIGIN_PATH; original directory //
const destination_path = '/ JS';
'.' = const + destination_dir destination_path; // the package directory
var PLUGIN_URL = ""; / * address * /
PLUGIN_URL the JSON.parse = (fs.readFileSync ( './ config.json', 'UTF-. 8')) pluginUrl;.
// traverse the directory file information obtained
function getPath (_path, callback) {
the let = fs.readdirSync files (_path);
files.forEach (function (file) {
if Analyzing // file exists
if (fs.statSync (_path + '/ '+ file).isFile()) { '+ file).isFile()) {
callback(_path, file);
}
});
}
File after generating a compressed //
function buildMin (the callback) {
/ * if there is min min folder will be created * /
IF {(fs.existsSync (destination_dir)!)
Fs.mkdirSync (destination_dir);
}
// run
getPath (ORIGIN_DIR, function (_path, file) {
the let file.match fileName = (/ (\ S +) (\ \ S +) $ /) [. 1];. // get the file name
let oldPath = _path + '/' + file, // original path
newPath = dESTINATION_PATH + '/' + fileName + '. js'; // not a new path to .js
const = _CODE fs.readFileSync (OldPath, 'UTF-. 8');
the callback (newPath, fileName , _CODE)
});
}
// delete the file
function deleteFile (delPath, direct) {
Direct delPath = delPath:? path.join (__ dirname, delPath)
the try {
/ **
* @des determines whether there is a file or folder
* /
IF (fs.existsSync (delPath)) {
fs.unlinkSync (delPath);
} the else {
the console.log ( 'inexistence path:', delPath);
}
} the catch (error) {
the console.log ( 'del error', error);
}
}
IF (process.env.NODE_ENV === 'Production') {
/ * production * /
getPath (destination_dir, function (_path, file) {
// delete .map file
IF (file.indexOf ()> 'js.map.' -. 1) {
the let Delp = _path + '/' + file ;
the deleteFile (Delp)
}
})
// packed
buildMin (function (newPath, fileName, _code) {
const minCode = UglifyJS.minify(_code,{
compress:{pure_funcs:'console.log'}
}).code;
fs.writeFileSync('.'+newPath, minCode);
});
}
if (process.env.NODE_ENV === 'development') {
/*开发环境*/
//打包
buildMin(function(newPath,fileName,_code){
var _codeFname = "."+newPath;
var _code_file={};
_code_file[_codeFname]=_code;
const _minObj = UglifyJS.minify(_code_file,{
sourceMap: {
filename:fileName+'.js',
url:PLUGIN_URL+newPath+".map",//生成的就是127.0.0.1:5500/minversion/js/xxx.js.map
includeSources:PLUGIN_URL+newPath+".map",
},
keep_fnames:true,
warnings: true,
});
fs.writeFileSync('.'+newPath, _minObj.code);
fs.writeFileSync('.'+newPath+'.map', _minObj.map);
});
}
At this point it is packaged successful it can be copied to your own projects try. Remember the source folder, destination folder into your project path, there PLUGIN_URL.