如何配置npm脚本实现npm run build后自动通过FTP上传Svelte构建产物？

1. 安装依赖 #

在项目根目录执行命令安装ftp-deploy开发依赖：

npm install ftp-deploy --save-dev

2. 编写上传配置文件 #

在项目根目录新建ftp-deploy.config.js，填入以下内容，按注释修改对应参数：

const FtpDeploy = require('ftp-deploy')
const ftpDeploy = new FtpDeploy()

const config = {
  user: "FTP用户名",
  password: "FTP密码",
  host: "FTP服务器地址",
  port: 21, // FTP默认端口，SFTP连接填22
  localRoot: __dirname + "/build", // 本地构建产物目录，Svelte默认输出为build
  remoteRoot: "/服务器站点对应目录/", // 例如 /www/wwwroot/mysite/
  include: ["*", "**/*"], // 上传所有文件
  exclude: [], // 无需上传的文件规则可在此添加
  deleteRemote: false, // 上传前是否删除远程目录所有文件，谨慎开启
  forcePasv: true, // 开启FTP被动模式，绝大多数场景需要开启
  sftp: false // 使用SFTP连接时改为true
}

ftpDeploy.deploy(config)
  .then(res => console.log('上传成功', res))
  .catch(err => console.error('上传失败', err))

敏感信息安全配置建议 #

不要将FTP账号密码硬编码到配置文件提交到代码仓库，推荐使用环境变量加载：

• 安装dotenv依赖：npm install dotenv --save-dev
• 项目根目录新建.env文件，写入敏感配置：

  FTP_USER=你的账号
  FTP_PASS=你的密码
  FTP_HOST=你的服务器地址
  

• 在ftp-deploy.config.js最顶部添加require('dotenv').config()，将配置中的对应字段替换为process.env.FTP_USER、process.env.FTP_PASS、process.env.FTP_HOST
• 将.env添加到.gitignore文件，避免提交到仓库

3. 配置npm脚本 #

打开package.json找到scripts字段，按需求修改：

• 如需执行npm run build时自动构建并上传，修改build命令：

  "scripts": {
    "build": "vite build && node ftp-deploy.config.js",
    // 其他原有命令保持不变
  }
  

• 如需分开执行构建和上传，新增单独的上传命令：

  "scripts": {
    "build": "vite build",
    "deploy": "node ftp-deploy.config.js",
    // 其他原有命令保持不变
  }
  

  配置完成后可先单独执行npm run deploy验证上传功能正常，再根据需要组合命令。

注意事项 #

• 若使用SvelteKit，需确认构建输出路径，将localRoot参数修改为实际产物目录（如.output/public）
• 首次配置建议关闭deleteRemote参数，确认路径配置正确后再按需开启，避免误删远程文件

内容的提问来源于stack exchange，提问作者ajbajb