使用删除的 babel 5 选项反应 Photoswipe

Question

我刚刚开始涉足 React，我想要的第一个组件之一是要使用的东西 photoswipe.js。 (react photoswipe) 看起来 npm 上有一个相当不错的，但我运行遇到了一个问题。当我运行我的故事书开始测试和构建我的组件时，我收到来自 babel 的错误。它说：

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)

所以我四处寻找了一下，注意到 babel rc 文件似乎设置为 stage:0 如果您正在生成一个组件，那么根据我的理解，这似乎是一个非常糟糕的主意随着 javascript 规范的更新和发展而持久。

虽然我对使用 babel 还是很陌生，所以我很难找到我需要为此组件更新的内容，以使其在我的环境中使用较新的 babel。以前有人遇到过这个组件的这个问题吗？有没有人对如何解决 bable transpile 问题和追踪我需要更新的内容有任何建议或提示？

Answer 1

来自 react-photoswipe 的 .babelrc 不适用于 babel 6。但它不需要，因为 main entry point of the module is lib/index.js，它包含已经转译的代码。您正在尝试再次转换它，它会自动应用最接近它的 .babelrc。

你应该在你的 webpack 配置中排除 node_modules，例如：

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

它不仅会解决您的问题，还会减少构建时间。

Answer 2

感谢 Michael 为我指明了正确的方向。我正在使用反应故事书工具测试和构建一个组件，该工具具有白名单配置，告诉它哪些节点模块不能运行通过完整构建。我必须将 react-photoswipe 添加到该白名单中，它现在可以正常工作了……很好地开始工作了，但是这个问题已经得到解决。

使用删除的 babel 5 选项反应 Photoswipe

React Photoswipe using removed babel 5 option

photoswipe

reactjs

webpack

babeljs