未加载/生成未生成

Question

我试图创建一个WordPress插件与反应。我正在跟踪这个链接。我有以下package.json文件

{
  "name": "test-plugin",
  "version": "1.0.0",
  "private": true,
  "description": "Sample plugin for React",
  "main": "index.js",
  "devDependencies": {
    "@wordpress/scripts": "^13.0.3"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "thor",
  "license": "ISC"
}

我正在按以下方式排队处理react脚本

wp_enqueue_script( 'react-script', plugin_dir_url(__DIR__) . 'build/index.js', ['wp-element'], $this->version, false );

发行

1. 不生成生成react js文件。我遵循上面的链接，一切都安装正确。但是在build文件夹中没有创建任何index.js文件。
2. 如果我将src/index.js列成队列而不是build/index.js，脚本就无法工作。脚本已加载，但未按预期工作。在加载脚本的页面中有一个带有id my_app的div。

下面是react脚本文件

const { render, useState } = wp.element;
 
const Votes = () => {
  const [votes, setVotes] = useState(0);
  const addVote = () => {
    setVotes(votes + 1);
  };
  return (
    <div>
      <h2>{votes} Votes test</h2>
      <p>
        <button onClick={addVote}>Vote!</button>
      </p>
    </div>
  );
};
render(<Votes />, document.getElementById('my_app'));

​

​

Answer 1

你也有同样的问题，我花了几个小时来解决这个问题。以下是我遇到的问题：

• 其中一个问题是，node_modules文件夹位于错误的位置--，应该在与主题相同的级别上。
• 另一个是我不得不运行npm运行启动，而不是npm启动。每当wp-脚本输出如下所示：

asset index.js 4.35 KiB [emitted] (name: index)

1 related asset asset index.asset.php 107 bytes [emitted] (name: index)

意味着它起作用了。如果不明白，这就意味着您的文件夹位置有问题。

试着让我知道。