欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack打包后不能调用,改用uglifyjs打包压缩

程序员文章站 2022-06-15 15:13:51
背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩。 项目的js中声明了一些全局变量 供其他js调用。 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,不能供其他js调用。 因此弃用了webpack。选用了uglifyjs。 原因: ......

背景:

项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩。

项目的js中声明了一些全局变量 供其他js调用。

这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将js中的变量变成局部,不能供其他js调用。 

因此弃用了webpack。选用了uglifyjs。

原因:

webpack里也有用到uglifyjs的webpack版:uglifyjs-webpack-plugin。

打包途径:

打包源文件:dev文件夹下的js文件====>目标文件:js文件夹。

目录结构

webpack打包后不能调用,改用uglifyjs打包压缩

 

 

 

使用:

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 就可以。

webpack打包后不能调用,改用uglifyjs打包压缩

 

 

3、entry.js代码

打算把dev文件下的js文件打包到js文件中。

代码逻辑:

  • 1、遍历dev文件夹下的所有js文件,获取到文件名和旧路径。
  • 2、生成js文件夹,如果没有js文件夹 则创建,生成新文件的路径。
  • 3、development下 用uglifyjs.minify压缩生成sourcemap文件。
  • 4、production下 由于development环境下生成了.js.map文件,这里删除.js.map,生成.js文件。

遇到的问题:

由于在浏览器读取时,映射 source map读取的文件需要和js是同一个目录 因此需要将前端的端口路径,赋值到.js.map。

例如:地址:127.0.0.1:5500/minversion/index.html;

推荐一款好用的编辑器(用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。