Reagieren Photoswipe mit entfernten Babel 5 Option

Question

Ich fange gerade an, in reagieren und eine der ersten Komponenten, die ich will, ist etwas, um photoswipe.js zu verwenden. (react photoswipe) Es sieht so aus, als ob es einen ziemlich anständigen auf npm gibt, aber ich stoße auf ein Problem. Wenn ich mein Storybook zum Testen und Erstellen meiner Komponente starte, erhalte ich einen Fehler von babel. Dort heißt es:

in ./~/react-photoswipe/lib/index.js 
Module build failed: ReferenceError: [BABEL] C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\react-photoswipe\lib\index.js: Using removed Babel 5 option: C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\react-photoswipe\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets 
    at Logger.error (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\logger.js:41:11) 
    at OptionManager.mergeOptions (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20) 
    at OptionManager.init (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) 
    at File.initOptions (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\index.js:212:65) 
    at new File (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\file\index.js:135:24) 
    at Pipeline.transform (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-core\lib\transformation\pipeline.js:46:16) 
    at transpile (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-loader\lib\index.js:46:20) 
    at C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-loader\lib\fs-cache.js:79:18 
    at ReadFileContext.callback (C:\Code\GIT\DanStatenReact\DanStatenUI\node_modules\babel-loader\lib\fs-cache.js:15:14) 
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13) 

Also habe ich ein wenig stochern und bemerkte, dass die babel rc-Datei auf der Bühne zu setzen erscheint: 0, die aus meinem Verständnis wie eine wirklich schlechte Idee scheint, wenn Sie eine Komponente erzeugen, die soll haltbar sein, da die JavaScript-Spezifikation aktualisiert und weiterentwickelt wird.

Ich bin immer noch ziemlich neu in der Verwendung von Babel, also habe ich eine Art schwer zu finden, was ich für diese Komponente aktualisieren müsste, damit es in meiner Umgebung mit dem neueren Babel funktioniert. Hat jemand dieses Problem mit dieser Komponente schon einmal festgestellt? Hat jemand irgendwelche Ratschläge oder Tipps, wie das Bable-Transpile zu beheben und aufzuspüren was ich aktualisieren muss?

Answer 1

Die .babelrc von react-photoswipe funktioniert nicht mit babel 6. Aber es muss nicht, weil main entry point of the module is lib/index.js, die den bereits transpiled Code enthält. Sie versuchen, es erneut zu übertragen, und es wendet automatisch die nächstgelegene .babelrc an.

Sie sollten node_modules in Ihrem webpack Config ausschließen, zum Beispiel:

{ 
    test: /\.js$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/ 
} 

Es wird nicht nur Ihr Problem beheben, sondern auch die Build-Zeit reduzieren.

Answer 2

Danke Michael, dass er mich in die richtige Richtung weist. Ich teste und baue eine Komponente mithilfe eines react-Storybook-Tools, das über eine Whitelist-Konfiguration verfügt, die angibt, welche Knotenmodule nicht durch den vollständigen Build laufen sollen. Ich musste dieser Whitelist reaktions-Fotostrip hinzufügen und es funktioniert nun ... gut, dass ich anfange zu arbeiten, aber dieses Problem ist erledigt.