试图让一个无头 WordPress 在纱线启动命令上进行热重载

Posted 2023-02-16

技术标签:

【中文标题】试图让一个无头 WordPress 在纱线启动命令上进行热重载【英文标题】：Trying to get a headless WordPress to do hot reloading on yarn start command 【发布时间】：2019-05-23 21:48:15 【问题描述】：

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

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

我在 docker for windows 下运行所有东西，所以不知道这是否是一个限制，或者可能是一个错误。我在他们的 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 上进行开发，而无需停止并重新启动每次更改的服务，这将无法做任何事情。

【问题讨论】：

是的，Windows 上的 Docker 是个问题。更多链接的类似问题：***.com/questions/53230974/… Idk 如果这是您需要的解决方案。但我认为您可以在 docker 容器外使用普通的前端堆栈 (yarn)。因此，您不是在容器内运行yarn，而是在主机上使用纱线安装。但在使用它之前，您应该在docker-compose.yml 文件中禁用端口3000:3000 以释放该端口。切勿尝试此解决方案，但在容器外运行 yarn start 应该可以正常工作。作为替代方案，您是否测试过 Chome 的扩展：livereload.com @DharmaSaputra 我应该如何释放该端口，我应该删除该行吗？我认为我遇到了端口问题，我在外面成功运行了 yarn start 但是当我访问 localhost:3000 时它什么也没显示？ 【参考方案1】：

值得尝试的事情是像往常一样使用前端堆栈（nodejs、yarn 等），而不是在 docker 容器中使用它。请按以下步骤操作：

后端服务

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

前端服务

您应该已经在您的计算机中安装了所有必需的前端工具（nodejs、yarn 等）。将工作目录更改为前端：cd frontend，安装前端包依赖：yarn install, 启动前端开发服务：yarn start, 现在您的前端工作流堆栈将正常运行（没有 docker）。请记住，您现在要使用的 yarn 在外面 docker 容器和完全分离的东西。

希望对你有帮助。

【讨论】：

顺便说一句，我必须运行其他任何人。纱线也安装在 docker 容器之外，以使这一切正常工作。【参考方案2】：

涉及两件事 - 网络服务器何时反映您更新后的 css 的更改（因此它将可供浏览器使用），其次是浏览器重新加载页面。