在 chrome 扩展中使用 redux

Question

我正在尝试使用 React 和 Redux 为 Google Chrome 开发一个扩展。 我的 background.js 如下：

import {wrapStore} from 'react-chrome-redux';
import store from './store';
import rootReducer from './reducers'

const store = createStore(rootReducer, {});

wrapStore(store, {
  portName: 'test'
})

我已经使用 npm 安装了所有必需的模块，但是当我在 Chrome 上上传扩展程序时出现此错误：

Uncaught SyntaxError: Unexpected token import

我已经在MDN上检查了import的兼容性，而且我的浏览器版本是62号，所以我认为我不需要使用Babel。

我的 manifest.json 文件如下：

{
  "manifest_version": 2,

  "name": "Demo React-Chrome extension",
  "description": "This extension shows how to run a React app in a Chrome extension",
  "version": "1.0",
  "background": {
    "scripts":["back.js"]
    },
  "browser_action": {
    "default_icon": "logo_small.png",
    "default_popup": "index.html"
  }
}

你们中有人知道这个问题吗？

Answer 1

在使用 Chrome 扩展程序时，您似乎仍需要将 ES6 代码转换为 ES5： ES6 Modules In Google Chrome Extension Development (unexpected token)

我在使用 React 和 Redux 编写我的第一个 Chrome 扩展程序时发现的最佳资源是您获得 react-chrome-redux npm 包的地方： https://github.com/tshaddix/react-chrome-redux-examples

示例对于如何构建扩展程序和解压加载它们非常有指导意义。 gulp 和 webpack 在这些情况下用于构建最终将被加载的 ES5 代码。

希望这会有所帮助！