尝试使用 React 制作 Chrome 扩展时出现“Uncaught SyntaxError: Unexpected identifier”答案

【问题标题】："Uncaught SyntaxError: Unexpected identifier" when trying to make a Chrome extension with React尝试使用 React 制作 Chrome 扩展时出现“Uncaught SyntaxError: Unexpected identifier”
【发布时间】：2018-04-13 21:01:37
【问题描述】：

我正在尝试使用 create-react-app 在 React 中制作 Chrome 扩展。当我将扩展加载到 Chrome 并时钟检查弹出窗口以尝试让 popup.html 在控制台上运行时，它在 popup.js 第 1 行（即导入反应行）上告诉我“Uncaught SyntaxError: Unexpected identifier”。

从这里的其他问题来看，我认为问题在于，当使用 ES6 时，我必须使用 npm start 运行应用程序，但是当尝试制作扩展程序而不是 Web 应用程序时，这将如何工作？有什么办法吗？由于我需要将解压后的扩展加载到 chrome 中，那么 npm start 如何提供帮助？

以下是相关文件：

manafest.json：

{
  "short_name": "Timer",
  "name": "Website Viewing Timer",
  "manifest_version": 2,
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "React Ext"
  },
  "permissions": [
    "tabs"
  ]
}

popup.html:

<h1>test</h1>
<script src="popup.js"></script>

popup.js：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class Timer extends Component {
  render() {   
    return <h1>hello</h1>;
  } 
}

ReactDOM.render(
  <Timer />,
  document.body
);

我刚刚学习了一个反应教程，所以我可能遗漏了一些明显的东西，但我感谢任何帮助。

【问题讨论】：

popup.js 不是 javascript，即 jsx，必须转译为 .js，查看 babel 和/或 webpack。
但是用create-react-app初始化文件不应该已经处理了webpack和babel吗？
你需要运行npm run build来生成实际的js。 Idk 会将其保存到哪里，但它创建的任何文件都是您需要加载的文件
啊，我很抱歉没有在原始帖子中提供更详细的信息。要在 chrome 上加载解压缩扩展，我会使用 npm run build，它将构建文件夹保存在项目文件夹的根目录中。在 Chrome 上加载解压缩的扩展程序时，我会加载该构建文件夹。

标签： javascript reactjs google-chrome-extension

【解决方案1】：

好的，经过一番谷歌搜索后，我能够通过将属性 type="text/jsx" 添加到 popup.html 中的脚本标记来解决此问题。虽然我实际上不是 100% 确定为什么会这样。是不是因为我需要将 popup.js 标记为 JSX 文件才能让 babel 翻译它？

【讨论】：