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

Node.js的 React.js

番长猴子

2020-03-23

我正在运行这个项目https://github.com/postlight/headless-wp-starter我已经能够使一切正常进行。后端工作正常,但是前端有一个错误。

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

我正在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上不停止并重新启动服务的每一次更改,这是不可能做的。

第2781篇《试图让无头的WordPress在yarn start命令上进行热重装》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
伽罗Near古一 2020.03.23

涉及两件事-Web服务器何时反映来自更新后的CSS的更改(以便浏览器可以使用),其二是浏览器重新加载页面。

yarn start 

启动Web服务器,但可能没有任何内容告诉Web服务器重新加载修改的文件。这可能就是为什么您需要重新发出“ yarn start”命令的原因。

我看到了有关热装的问题-查看此链接

如何将实时重载添加到我的Node.js服务器

米亚 2020.03.23

值得尝试的事情是不使用docker容器内部的前端堆栈(nodejs,yarn等)。按着这些次序:

后端服务

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

前端服务

  1. 您应该已经在计算机中安装了所有必需的前端工具(nodejs,yarn等)。
  2. 改变工作目录到前端:cd frontend
  3. 安装前端软件包的依赖关系:yarn install
  4. 启动前端开发服务:yarn start
  5. 现在,您的前端工作流堆栈将正常运行(没有docker)。请记住,yarn您现在要使用的不在docker容器之外,并且是完全分开的东西。

希望能帮助到你。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android