最近随手写了一个React和Vue的自动发布工具,可以通过简单的脚本命令(npm run publish)将build或dist文件夹上传到服务器目录,实现一键发布
描述
使用 FTP Server,将 ReactJS App 和 VueJS App 的构建文件发布到 web 服务器目标目录。 优点如下:
- 没有残留的历史文件。 在发布过程中,将生成当前版本的目录 json。 当前版本中不再引用的文件在上传后将被删除。
- 优化文件的发布顺序。 为了防止影响在线用户访问您的 web 应用程序,指定的条目文件(如: index. html)将最后上传
安装
npm i web-app-ftp-publish
例子
// publish.js
const Publisher = require(`web-app-ftp-publish`);
const path = require('path');
let publisher = new Publisher({
ftp:{
host: "",
port: "",
user: "",
password: "",
}, // 必传。 Ftp 配置对象。 配置文件链接到这里: https://github.com/mscdex/node-FTP#methods
targetPath: path.resolve(__dirname + "/./build"), // 必传。构建目录的绝对路径(build或dist文件夹路径)
indexFileName:"index.html", // 可选。 构建目录的index文件名。 默认 'index.html'
destPath:"/react/build", // Ftp 目的地目录. default "/',ftp server root directory
catalogFileName:"build-dir-catalog" //Optional . Catalog json file name.default 'catalog.json'
});
publisher.resume();
// package.json
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"publish": "node [YOUR PATH]/publish.js" // 添加publish脚本命令
},
// Terminal
npm run publish
配置
-
ftp
-必传。 Ftp 配置对象。 配置文件链接到这里: https://github.com/mscdex/nod... -
targetPath
- 必传。构建文件夹(build或者dist)的项目路径 -
indexfilename
-可选。 构建文件夹(build或者dist)索引文件名。 默认index. html。 -
destPath
- 可选。 将文件上传到Ftp 哪个文件夹下下。 默认ftp 服务器根目录。 -
catalogFileName
- 可选。目录 json 文件名. 默认“Catalog.json”
方法
-
resume
, 开始上传
项目地址
- Github : https://github.com/breakeris/...
- NPM : https://www.npmjs.com/package...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。