使用移除的 babel 5 选项反应 Photoswipe答案

【问题标题】：React Photoswipe using removed babel 5 option使用移除的 babel 5 选项反应 Photoswipe
【发布时间】：2017-04-01 19:35:39
【问题描述】：

我刚刚开始涉足 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 并追踪我需要更新的内容有任何建议或提示？

【问题讨论】：

标签： reactjs webpack babeljs photoswipe

【解决方案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/
}

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

【讨论】：

谢谢。这让我知道从哪里开始。我正在使用一个对我来说是全新的项目结构和配置，其中包括很多很酷的东西，但也有很多 babel web pack 等配置，我刚刚开始熟悉。我会看看沿着这条线我能做些什么。谢谢。
好的，我很确定我已经解决了。我正在使用 react 故事书构建一个组件，我必须跟踪它并将 react-photoswipe 放入该工具配置的白名单中

【解决方案2】：

感谢迈克尔让我指明了正确的方向。我正在使用具有白名单配置的 react 故事书工具测试和构建一个组件，该配置告诉它哪些节点模块不能在完整构建中运行。我不得不将 react-photoswipe 添加到该白名单中，它现在正在工作......开始工作了，但这个问题已经解决了。

【讨论】：