Ubuntu环境搭建本地p5.js项目时遇Babel缓存写入权限错误

问题重现 #

执行命令：

docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples

出现错误：

Getting p5 user
Babel could not write cache to file: /usr/src/app/node_modules/.cache/@babel/register/.babel.7.22.5.development.json
due to a permission issue. Cache is disabled.
Deleting old projects...

解决方案 #

1. 对齐容器与宿主机用户权限 #

修改docker-compose-development.yml中app服务的配置，添加用户指定项，让容器内进程用宿主机当前用户的UID/GID运行：

services:
  app:
    # 保留原有配置
    user: "${UID}:${GID}"

运行命令前先导出当前用户的UID和GID：

export UID=$(id -u)
export GID=$(id -g)
docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples

2. 自定义Babel缓存目录 #

修改项目的Babel配置文件（如.babelrc或babel.config.js），将缓存目录指定到项目根目录下的可写路径：

module.exports = {
  // 保留原有配置
  cacheDirectory: './.babel-cache'
};

在宿主机提前创建目录并设置权限：

mkdir .babel-cache
chmod 777 .babel-cache

之后重新执行原命令。

3. 临时禁用Babel缓存（应急方案） #

直接在命令中添加环境变量禁用缓存：

docker-compose -f docker-compose-development.yml run --rm app BABEL_DISABLE_CACHE=1 npm run fetch-examples

或者修改项目package.json中的脚本：

{
  "scripts": {
    "fetch-examples": "BABEL_DISABLE_CACHE=1 node [你的脚本文件名].js"
  }
}

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