użyj redux w rozszerzeniach chrome - javascript, reactjs, google-chrome, redux

Próbuję opracować rozszerzenie przeglądarki Google Chrome za pomocą React i Redux. Mój background.js jest następujący:

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

const store = createStore(rootReducer, {});

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

Zainstalowałem z npm wszystkie wymagane moduły, ale kiedy załaduję rozszerzenie w Chrome, pojawia się ten błąd:

Uncaught SyntaxError: Nieoczekiwany import tokena

Sprawdziłem już zgodność importu MDN a wersja mojej przeglądarki jest 62., więc myślę, że nie muszę używać Babel.

Mój plik manifest.json jest następujący:

{
"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"
}
}

Czy ktokolwiek z was ma pomysł na ten problem?

Odpowiedzi:

Wygląda na to, że musisz nadal konwertować swój kod ES6 na ES5 podczas pracy z rozszerzeniami Chrome: Moduły ES6 w rozwoju rozszerzeń Google Chrome (nieoczekiwany token)

Najlepszym zasobem, jaki znalazłem podczas pisania mojego pierwszego rozszerzenia do Chrome z React i Redux jest ten, z którego pochodzi react-chrome-redux Pakiet npm: https://github.com/tshaddix/react-chrome-redux-examples

Przykłady są bardzo pouczające, jak budować rozszerzenia i ładować je rozpakowane. gulp i webpack są używane w takich przypadkach do zbudowania kodu ES5, który zostanie ostatecznie załadowany.

Mam nadzieję że to pomoże!