试图让一个无头的 WordPress 在 yarn start 命令上进行热重载

Question

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

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

我运行为 windows 设置了 docker 下的所有内容，所以不知道这是否是一个限制，或者可能是一个错误。我已经在他们的 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

涉及两件事 - Web 服务器何时反映更新后的更改 css（以便浏览器可以使用），其次是浏览器重新加载页面。

yarn start

启动网络服务器，但可能没有任何信息可以告诉网络服务器重新加载您修改过的文件。这可能是您需要重新发出 'yarn start' 命令的原因。

我看到一个关于热重载的问题 - 看到这个 link

How can I add live-reload to my nodejs server

Answer 2

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

后端服务

Disable the port 3000 in docker-compose.yml file, you can delete the - "3000:3000" line or change it instead. Because this the port will used by yarn that you run outside the docker container. Causing port conflict if not changed nor deleted.

From root of the project run: docker-compose up -d to start the docker services,

Confirm that port 3000 is free by using docker ps,

Enter bash to docker container docker exec -it wp-headless /bin/bash, then run yarn install. Only run this step once on first setup. Actually command yarn install here has nothing to do with the react frontend. It's just doing setup for wordpress and the backend dependencies. Exit from the container once all installation finished.

前端服务

You should already install all required frontend tools in your computer (nodejs, yarn, etc.).

Change working directory to frontend: cd frontend,

Install the frontend packages dependencies: yarn install,

Start the frontend development service: yarn start,

Now your frontend workflow stack will run as normal (without docker). Bear in mind that the yarn that you'll using now is outside the docker container and being fully separated thing.

希望对您有所帮助。

试图让一个无头的 WordPress 在 yarn start 命令上进行热重载

Trying to get a headless WordPress to do hot reloading on yarn start command

node.js

wordpress

docker

yarnpkg

next.js