如果我不需要SSR，如何编译JS文件以在WordPress主题中使用React组件

Question

我有一个WordPress主题，其中一部分我想使用React组件(我不需要SSR(。我过去使用过create-react应用程序，但现在我有了这个代码：

<div id="react-nav-bar"></div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="<?php echo get_template_directory_uri() ?>/react-nav-bar/build/static/js/runtime-main.39639aca.js"></script>

而且它不起作用。对runtime-main.39639aca.js的请求成功了，但它没有加载我的导航栏。

问题是create-react应用程序生成的不仅仅是一个JS文件，我只需要一个可以放在主题中的JS文件。

我用webpack做过一些尝试，但没有成功。我在GitHub上搜索了一下，有一些东西，我不知道该试试哪一个。我试着嵌入react，但它给了我一个错误。我也试过这个，但对我不起作用。

我也不喜欢ES Lint警告(我使用VS代码(。

更新1

这个命令做了我想要的，部分：

npx babel --watch react-nav-bar/src --out-dir react-nav-bar/dist --presets react-app/prod

这就是我在没有WebPack的情况下的尝试，但VS Code中的编辑器充满了红色的歪歪扭扭，尽管它编译得很好，而且我无法导入npm模块。有没有一种方法可以导入npm模块？自动完成使我的工作效率大大提高。

Answer 1

我试了一下Rollup，它运行得很好。

我在DevTools控制台中收到了一些警告，但它有效！具有自动完成功能和npm模块。

基于这个要点，我有以下文件：

src/index.tsx

import * as React from "react";
import { render } from 'react-dom';
const App = () => {
return <button onClick={() => alert('React from WordPress !')}>Cool!!!</button>;
};
window.addEventListener('DOMContentLoaded', () => {
render(<App />, document.getElementById('react-nav-bar'));
});

package.json

只有两个附加脚本：

"build": "rollup -c",
"watch": "rollup -cw"

与上面链接的要点相比，不寻常的依赖性：

"@rollup/plugin-commonjs": "^18.0.0",
"@rollup/plugin-node-resolve": "^11.2.1",
"rollup-plugin-typescript": "^1.0.1",

rollup.config.js

import typescript from 'rollup-plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: './src/index.tsx',
output: {
file: './dist/bundle.js',
},
format: 'iife',
plugins: [ resolve(), typescript(), commonjs() ],
};

tsconfig.json

{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"module": "es6",
"moduleResolution": "node",
"noImplicitAny": true,
"outDir": "./dist",
"preserveConstEnums": true,
"target": "es5",
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
]
}

对于React，我有一条专线："allowSyntheticDefaultImports": true。

/页脚.php

<div id="react-nav-bar"></div>
<script>try { process.env.NODE_ENV } catch(e) { var process = { env: { NODE_ENV: 'production' } }; }</script>
<script src="<?php echo get_template_directory_uri() ?>/react-nav-bar/dist/bundle.js"></script>

这帮助很大：https://github.com/hybridsjs/hybrids/issues/27#issuecomment-452346986