试图让无头的WordPress在纱线启动命令上进行热重装

Question

我正在运行这个项目https://github.com/postlight/headless-wp-starter.我已经能够让一切工作达到一定程度.后端工作正常,但是,前端有一个bug.

在说明中它说要运行yarn start以启动前端服务器,应该是next.js.现在技术上工作正常,它继续运行localhost:3000.但是,当我修改scss文件时frontend/src/styles,它不会在shell中重新渲染,并且浏览器中没有热重新加载,即使按下刷新也不会显示样式更改.但是,如果我停止使用纱线,ctrl + c然后再次运行它,yarn start我的样式会显示在浏览器刷新上.

我在docker for Windows下运行所有​​东西,所以不知道这是一个限制,还是可能是一个bug.我已经在他们的github上发布了一个问题,但是认为在这里查看也没有什么坏处.

我能想到的唯一代码是分享package.json它就是这样.提前谢谢.

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "next build",
        "start": "node server.js",
        "docker:build": "docker build -t frontend .",
        "docker:clean": "docker rm -f frontend || true",
        "docker:run": "docker run -p 3000:3000 --name frontend frontend",
        "docker:stop": "docker stop frontend",
        "docker:start": "docker start frontend && yarn run docker:logs",
        "docker:logs": "docker logs -f frontend",
        "deploy":
            "yarn run docker:build && yarn run docker:clean && yarn run docker:run"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.16.2",
        "isomorphic-unfetch": "^2.0.0",
        "next": "latest",
        "react": "^16.0.0"
    },
    "devDependencies": {
        "autoprefixer": "7.1.5",
        "babel-plugin-module-resolver": "^2.7.1",
        "babel-plugin-wrap-in-js": "^1.1.0",
        "glob": "^7.1.2",
        "node-sass": "^4.4.0",
        "normalize.css": "^7.0.0",
        "postcss-easy-import": "^3.0.0",
        "postcss-loader": "^2.0.7",
        "raw-loader": "^0.5.1",
        "react-dom": "^16.2.0",
        "sass-loader": "^6.0.6",
        "webpack": "^3.10.0"
    }
}

更新:由于热重新加载似乎是Windows的一个问题,我的主要问题是,是否有办法运行不热重载的任务,我只能自己刷新浏览器,否则我无法开发在Windows上没有停止并重新启动服务的每一个变化,这是不可能做任何事情.

Answer 1

值得尝试的事情是正常使用前端堆栈（nodejs、yarn 等），而不是在 docker 容器内使用它。按着这些次序：

后端服务

1. 3000禁用文件中的端口docker-compose.yml，您可以删除该- "3000:3000"行或更改它。因为这个端口将被yarn您在 docker 容器外部运行的端口使用。如果不更改也不删除会导致端口冲突。
2. 从项目的根目录运行：docker-compose up -d启动 docker 服务，
3. 使用确认端口3000空闲docker ps，
4. 在docker容器中输入bash docker exec -it wp-headless /bin/bash，然后运行yarn install。仅在首次设置时运行此步骤一次。实际上这里的命令yarn install与反应前端无关。它只是为 WordPress 和后端依赖项进行设置。所有安装完成后退出容器。

前端服务

1. 您应该已经在计算机中安装了所有必需的前端工具（nodejs、yarn 等）。
2. 将工作目录更改为前端：cd frontend，
3. 安装前端包依赖项：yarn install，
4. 启动前端开发服务：yarn start,
5. 现在您的前端工作流程堆栈将正常运行（无需 Docker）。请记住，yarn您现在使用的容器位于 docker 容器之外，并且是完全独立的。

希望能帮助到你。