背景：
项目基于原生js,没用到任何脚手架和框架，但也需要打包压缩。
项目的js中声明了一些全局变量 供其他js调用。
这时候如果用webpack打包，基于webpack特性，会嵌套一层大函数，会将js中的变量变成局部，不能供其他js调用。
因此弃用了webpack。选用了uglifyjs。
原因：
webpack里也有用到uglifyjs的webpack版：uglifyjs-webpack-plugin。
打包途径：
打包源文件：dev文件夹下的js文件====>目标文件：js文件夹。
目录结构
使用：
1、如果是es5 使用uglify-js 官网的默认分支就是这个。
2、如果是es6 使用uglify-es 官网的harmony分支 下载下来就是uglify-es。
uglifyjs官网：https://github.com/mishoo/uglifyjs2
步骤：
首先确认自己电脑有没有安装node，这是用node启动的。
1、下载uglifyjs 这里我下载的是es版。
npm install uglify-es -d
2、写一个package.json，下面的package.json可以下载下来 直接npm i 就省略了第一步了。
scripts里面是我写的命令
我想在development下打包后也能调试 用到了sourcemap（映射），
在production下打包压缩。
我的入口文件 起名了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"
}
}
注意：node_env在windows下不兼容 需要安装cross-env插件：npm install cross-env --save-dev
安装完 在 build_min 和 build_min_dev后加上 cross-env 就可以。
3、entry.js代码
打算把dev文件下的js文件打包到js文件中。
代码逻辑：
遇到的问题：
由于在浏览器读取时,映射 source map读取的文件需要和js是同一个目录 因此需要将前端的端口路径，赋值到.js.map。
例如：地址：127.0.0.1:5500/minversion/；
推荐一款好用的编辑器（用vcode编辑器的open with live server启动项目，默认端口5500）
读取前端js路径：127.0.0.1:5500/minversion/js/xxx.js；
映射生成的路径也得是127.0.0.1:5500/minversion/js/xxx.js.map;如果是'./js/xxx.js.map'是读取不到的。
我新建了一个config.json 专门存取常量，我将前端的端口写在这里 声明为：plugin_url只要修改这个，entry.js就能读取到。
对source map 不太知道的 可以看官网文档。
config.json
{"pluginurl":"http://127.0.0.1:5500/minversion"}
entry.js
const path = require('path');
const fs=require('fs');
const uglifyjs = require("uglify-es");//兼容es6
//var uglifyjs = require("uglify-js");//es5
const origin_path='/dev';
const origin_dir = '.'+origin_path; // 原目录
const destination_path='/js';
const destination_dir = '.'+destination_path;//打包后的目录
var plugin_url="";/*地址*/
plugin_url=json.parse(fs.readfilesync('./config.json','utf-8')).pluginurl;
// 遍历目录得到文件信息
function getpath(_path, callback) {
let files = fs.readdirsync(_path);
files.foreach(function(file){
//判断文件是否存在
if (fs.statsync(_path + '/' + file).isfile()) {
callback(_path, file);
}
});
}
//生成压缩后的文件
function buildmin (callback) {
/*如果不存在min 就会创建min文件夹*/
if ( !fs.existssync(destination_dir) ) {
fs.mkdirsync(destination_dir);
}
// 运行
getpath(origin_dir, function (_path, file) {
let filename = file.match(/(\s+)(\.\s+)$/)[1]; // 获得文件名
let oldpath = _path + '/' + file, // 原路径
newpath = destination_path + '/' + filename+'.js'; // 新路径 到不了.js
const _code = fs.readfilesync(oldpath, 'utf-8');
callback(newpath,filename,_code)
});
}
//删除文件
function deletefile(delpath, direct) {
delpath = direct ? delpath : path.join(__dirname, delpath)
try {
/**
* @des 判断文件或文件夹是否存在
*/
if (fs.existssync(delpath)) {
fs.unlinksync(delpath);
} else {
console.log('inexistence path：', delpath);
}
} catch (error) {
console.log('del error', error);
}
}
if (process.env.node_env === 'production') {
/*生产环境*/
getpath(destination_dir, function (_path, file) {
//删除.map文件
if(file.indexof('.js.map')>-1){
let delp = _path+'/'+file;
deletefile(delp)
}
})
//打包
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);
});
}
至此就打包成功啦，可以复制到自己项目中试一下。记得将源文件夹、目标文件夹改成你的项目路径，还有plugin_url。
如对本文有疑问， 点击进行留言回复！！
vue脚手架安装以及vue脚手架创建项目（详细步骤），看这篇文章就行了，小白也能创建自己的项目
JavaScript递归函数详解：如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论