vue,react项目中使用webpack打包中直接打包成压缩包的方法

摘要:
“../build.zip”:“../build.test。zip'));vararchive=存档;//列出所有要写入的存档数据//“关闭”事件仅在涉及输出时发生。on('close',function()){//console.log('压缩包地址为:',path.resolve(__dirname,'../build.test','build.test.zip'));console.log('压缩的包地址为',path/resolve(__ dirname,isProduction?'../build/build.zip').test/build.test.zip));;console.log;console/log;//使用fs重命名重命名api移动文件})//当数据源与数据源不同时触发此事件。//它不是库的一部分,而是来自NodeJSStreamAPI//@参见:https://nodejs.org/api/stream.html#stream_event_endoutput.on ;// 很好的实践来捕捉警告讽刺。在;//很好的做法是明确记录此错误。在…上archive.on('finish',函数(err){if(err)throrrr;/*varsourceFile=路径.解析(__dirname,'../build.test.zip');vardestPath=路径.分解(__dirname','../build.test','build.test.zip');*/varsourceFile=path.解析(__ dirname,isProduction?

这里以react项目为例,(vue项目类似)

为改造的 pageage.json 中 scripts 位置的代码

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node --max_old_space_size=4096 scripts/build.js",
    "build:test": "node --max_old_space_size=4096 scripts/build.test.js",
    "test": "node scripts/test.js"
  },

注:node --max_old_space_size=4096 这里代码与本次介绍无关,详见  https://www.cnblogs.com/taohuaya/p/13444470.html

这里的两个命令  yarn build  和  yarn build:test 分别是打包 正式包 和 测试包

会在项目的根目录生 build文件 和 build.test 文件夹

vue,react项目中使用webpack打包中直接打包成压缩包的方法第1张

我们的 目标是 运行上面两个命令时 分别能 自动压缩 build文件夹下的文件和 build.test文件夹下的文件为 build.zip 和 build.test.zip,后期我们上线发包的时候直接 拷贝出去 这两个 zip文件即可。

在项目中找个合适的位置 新建一个 zip.js 

vue,react项目中使用webpack打包中直接打包成压缩包的方法第2张

在编写 zip.js 之前我们得先下载两个工具包分别是 

archiver  用来压缩文件 详见:https://www.archiverjs.com/
minimist  用来解析 node 命令行传来的参数 详见:http://nodejs.cn/learn/nodejs-accept-arguments-from-the-command-line

yarn add archiver minimist --dev
//
npm i archiver minimist --save-dev

 scripts/zip.js

vue,react项目中使用webpack打包中直接打包成压缩包的方法第3张vue,react项目中使用webpack打包中直接打包成压缩包的方法第4张
// require modules
const argv = require('minimist')(process.argv.slice(2)); // 用来获取命令行传来的参数
var fs = require('fs');
var archiver = require('archiver');
var path = require('path');

/* 打包环境用来区分 正式包还是测试包 */
const isProduction = argv['build_env'] === 'production';
console.log('打包环境为:', argv['build_env']);
console.log('文件压缩中...');
// 创建一个文件来流  数据, 即将文件压缩得到的文件地址。
// var output = fs.createWriteStream(__dirname + '/build:test.zip');
var output = fs.createWriteStream( path.resolve(__dirname, isProduction ? '../build.zip' : '../build.test.zip') );
var archive = archiver('zip', {
    zlib: { level: 9 } // 设置压缩级别.
});

// listen for all archive data to be written
// 'close' event is fired only when a file descriptor is involved
output.on('close', function() {
    // console.log('压缩包地址为:', path.resolve(__dirname, '../build.test','build.test.zip'));
    console.log('压缩包地址为:', path.resolve(__dirname, isProduction ? '../build/build.zip': '../build.test/build.test.zip'));
    console.log('压缩包大小', archive.pointer() + ' total bytes');
    console.log('压缩程序已经完成,输出文件描述符已经关闭/archiver has been finalized and the output file descriptor has closed.');
    // 利用 fs.rename 重命名api 移动文件
});

// This event is fired when the data source is drained no matter what was the data source.
// It is not part of this library but rather from the NodeJS Stream API.
// @see: https://nodejs.org/api/stream.html#stream_event_end
output.on('end', function() {
    console.log('数据流已流完 / Data has been drained');
});

// good practice to catch warnings (ie stat failures and other non-blocking errors)
archive.on('warning', function(err) {
    if (err.code === 'ENOENT') {
        // log warning
        console.warn('stat故障和其他非阻塞错误');
    } else {
        // throw error
        throw err;
    }
});

// good practice to catch this error explicitly
archive.on('error', function(err) {
    console.error('压缩文件出错');
    throw err;
});

archive.on('finish', function (err){
    if(err) throw err;
/*
    var sourceFile = path.resolve(__dirname, '../build.test.zip');
    var destPath = path.resolve(__dirname, '../build.test', 'build.test.zip');
*/
    var sourceFile = path.resolve(__dirname, isProduction ? '../build.zip' : '../build.test.zip');
    var destPath = path.resolve(__dirname, isProduction ? '../build/build.zip' : '../build.test/build.test.zip');
    
    
    fs.rename(sourceFile, destPath, function (err){
        if(err) throw err;
        console.log('压缩包文件移动成功');
    });
    // 移动文件
    console.log('压缩包文件移动中...');
});

// pipe archive data to the file
// 通过管道将数据归档到压缩文件
archive.pipe(output);

/*
// append a file from stream
var file1 = __dirname + '/file1.txt';
archive.append(fs.createReadStream(file1), { name: 'file1.txt' });

// append a file from string
archive.append('string cheese!', { name: 'file2.txt' });

// append a file from buffer
var buffer3 = Buffer.from('buff it!');
archive.append(buffer3, { name: 'file3.txt' });

// append a file
archive.file('file1.txt', { name: 'file4.txt' });

// append files from a sub-directory and naming it `new-subdir` within the archive
archive.directory('subdir/', 'new-subdir');
*/

// append files from a sub-directory, putting its contents at the root of archive
// 从子目录追加文件,将其内容放在归档(压缩文件)的根目录中
/*
directory(dirpath, destpath, data)  目录路径, 存档(压缩文件)中的目标路径(false代表放到根目录), 要压缩的数据
*/
// archive.directory('build:test/', false);
// var fileDirPath = path.resolve(__dirname, '../build.test');
var fileDirPath = path.resolve(__dirname, isProduction ? '../build' : '../build.test');
archive.directory(fileDirPath, false);
/*
// append files from a glob pattern
archive.glob('subdir/!*.txt');
*/

// 压缩文件
// finalize the archive (ie we are done appending files but streams have to finish yet)
// 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
archive.finalize();
View Code

修改 package.json 中script部分

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node --max_old_space_size=4096 scripts/build.js && node scripts/zip.js --build_env=production",
    "build:test": "node --max_old_space_size=4096 scripts/build.test.js && node scripts/zip.js --build_env=test",
    "test": "node scripts/test.js"
  },

在原来的基础上新增 红色内容部分

&& 符号表示 等运行完毕 上一段js 后 在运行 下一段 

即 当 运行

命令  node --max_old_space_size=4096 scripts/build.js 结束后

运行  node scripts/zip.js --build_env=production 命令

详见: 。。。。

通过以上处理后 我们就可以得到相应的压缩包了

vue,react项目中使用webpack打包中直接打包成压缩包的方法第5张

通用运行命令

yarn build 或 yarn build:test 

此时 build.zip 和 build.test.zip 就是我们向要的东西了

完成

免责声明:文章转载自《vue,react项目中使用webpack打包中直接打包成压缩包的方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇STM32CubeIDE+FreeRTOS任务管理实验SqlServer中Index Seek的匹配规则(一)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue-CLI项目搭建

一、环境搭建 1、安装服务器node 官网下载 https://nodejs.org/zh-cn/ node:用C++语言编写,用来运行JavaScript语言     node可以为前端项目提供server (包含了socket) 2、安装包管理器npm 管理员命令行安装:window系统:npm install -g cnpm --registry=h...

Mac下卸载删除nvm和node

nvm 是 Mac 下的 node 管理工具,有点类似管理 Ruby 的 rvm,nvm 是一个独立于 node/npm的外部 shell 脚本。 卸载nvm 1.移除nvm内容 cd ~ rm -rf .nvm 2.移除掉~/.profile, ~/.bash_profile, ~/.zshrc, ~/.bashrc文件中关于nvm的配置 vim .b...

VUEX

在Vue中组件之间的共享数据的方式:1、父组件向子组件传值:v-bind 属性绑定2、子组件向父组件传值:v-on 事件绑定3、兄弟组件之间进行传值:EventBus$on 接收数据的那个组件$emit 发送数据的那个组件 上面的3种方式适用于小项目中的组件通信,当项目变的庞大的时候,就有些力不从心了。 上图中,左侧图片是未使用vuex进行数据传递的。当...

Jenkins和Gitlab CI/CD自动更新k8s中pod使用的镜像说明

Jenkins 使用Jenkins的话,完成的工作主要有如下步骤:1.从Gogs或Gitlab仓库上拉取代码2.使用Maven编译代码,打包成jar文件3.根据jar文件使用相对应的Dockerfile文件制作成Docker镜像4.把Docker镜像推送到Nexus上的Docker仓库(或者Harbor仓库)5.运行shell脚本,给k8s的master主...

react 脚手架cra的注意事项,以及脚手架生成目录的分析,以及四个脚本命令

安装阶段 1.新建文件夹test 2.不需要在tset里npm init 3.全局安装脚手架 npm install -g create-react-app 4.create-react-app XXX,这里的名字,不能使react,或者react-dom等等,如果是这些关键词,他会提示错误。 create-react-app demo01 //用脚...

Node与express开发

1.初识Express Express 网站上是这样介绍 Express 的: “精简的、灵活的 Node.js Web 程序框架,为构建单页、多页及混合的 Web 程序提供了一系列健壮的功能特性。 ”这究竟是什么意思呢?下面我们来逐一解读一下。 精简 这是 Express 最吸引人的特性之一。框架开发者经常会忘掉“少即是多”这一基本原则。Express...