PHP页面集成React组件时import语句报错的技术求助

方法1：使用打包工具（推荐方案） #

你之前只用Babel转译JSX，但Babel不会处理模块依赖的打包。当你拆分组件用import引入时，浏览器无法直接解析这些模块引用，必须用打包工具把所有依赖文件合并成一个可在浏览器运行的文件。以Webpack为例：

1. 初始化项目（未初始化过的话）：

npm init -y

2. 安装所需依赖：

npm install webpack webpack-cli babel-loader @babel/core @babel/plugin-transform-react-jsx --save-dev

3. 在项目根目录创建webpack.config.js配置文件：

module.exports = {
  entry: './views/post/app.js', // 你的源文件入口
  output: {
    filename: 'app.js',
    path: __dirname + '/web/assets' // 输出到你的asset目录
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-transform-react-jsx']
          }
        }
      }
    ]
  }
};

4. 执行打包命令：

npx webpack --mode production

5. 页面保持原有的脚本引入即可，打包后的app.js已经包含所有依赖组件，浏览器可直接运行。

方法2：将脚本标记为ES模块 #

如果不想用打包工具，可通过修改页面脚本标签，让浏览器以ES模块方式加载文件：

1. 修改PHP页面的脚本标签：

<div id="app"></div>

<script type="module" src="/assets/app.js"></script>

2. 转译SeoKeywords.js文件（如果包含JSX）：

npx babel ./views/post/SeoKeywords.js --out-file ./web/assets/SeoKeywords.js --plugins=@babel/plugin-transform-react-jsx

3. 修改app.js中的导入路径，添加完整的.js后缀（浏览器ES模块要求必须写全后缀）：

import SeoKeywords from './SeoKeywords.js';

注意：这种方式仅支持现代浏览器，旧浏览器可能无法兼容。

方法3：用Babel转换模块格式 #

通过Babel将ES模块转译为浏览器能识别的UMD格式，同时处理JSX：

1. 安装模块转换插件：

npm install @babel/plugin-transform-modules-umd --save-dev

2. 转译app.js时添加该插件：

npx babel ./views/post/app.js --out-file ./web/assets/app.js --plugins=@babel/plugin-transform-react-jsx,@babel/plugin-transform-modules-umd

3. 同样转译SeoKeywords.js：

npx babel ./views/post/SeoKeywords.js --out-file ./web/assets/SeoKeywords.js --plugins=@babel/plugin-transform-react-jsx,@babel/plugin-transform-modules-umd

这种方式可能会引入全局变量，不如打包工具干净，仅作为临时方案使用。

内容的提问来源于stack exchange，提问作者Brain2xml