react-create-app打包自动化(zip,ftp)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liqianglai/article/details/80404976

可能用到的包

filemanager-webpack-plugin
webpack-ftp-plugin
jsftp

下面四个使用，报错，不知为什么

zip-webpack-plugin
webpack-zip-plugin
webpack-ftp-plugin
webpack-ftp-upload-plugin

提醒

• FTP账户写权限

添加压缩包（zip）支持

// \config\webpack.config.prod.js
...
const FileManagerPlugin = require("filemanager-webpack-plugin");

...
plugins:[
  ...
  // Compresses all assets into a zip file.
  new FileManagerPlugin({
    onEnd: {
      archive: [
        {
          source: "build/**/*",
          destination:
            "区域微服务/version" +
            require(paths.appPackageJson).version +
            "_" +
            currentDate() +
            ".zip"
        }
      ]
    }
  })
  // 如果把上传FTP的代码写在此处，不能保证打包（zip）已完成
]

添加 FTP 支持

• 新增ftp脚本 \scripts\ftp.js目的是执行webpack-ftp-plugin

"use strict";

process.env.NODE_ENV = "production";

const path = require("path");
const webpack = require("webpack");
const WebpackFtpPlugin = require("webpack-ftp-plugin");

const config = {
  entry: path.join(__dirname, "ftp.js"),
  output: {
    path: path.join(__dirname, ".."),
    filename: "不要提交我.log" // 生产的无效文件
  },
  plugins: [
    // Upload file to FTPServer
    new WebpackFtpPlugin({
      remoteRoot: "/标准产品/智慧区域/区域微服务/",
      localRoot: __dirname,
      deployPath: "../区域微服务/"
    })
  ]
};

const uploadFile = () => {
  console.log("文件开始上传……");
  let compiler = webpack(config);
  compiler.run((err, stats) => {
    if (err) {
      return reject(err);
    }
  });
};

uploadFile();

• 添加ftp配置文件 \.ftppass

{
  "authKey": {
    "username": "x",
    "password": "xx"
  },
  "host": "x.x.x.x",
  "port": "21"
}

• 执行打包和上传脚本 \package.json

"scripts": {
  "build": "node scripts/build.js && node scripts/ftp.js",
},

运行

yarn build
# or 
npm run build

不出意外，就成功打包并上传了