在 React 故事书自定义 webpack 配置中使用 webpack ProvidePlugin

Posted 2023-03-23

【中文标题】在 React 故事书自定义 webpack 配置中使用 webpack ProvidePlugin

【英文标题】：using webpack ProvidePlugin in React storybook custom webpack config

【发布时间】：2017-10-05 13:44:51

【问题描述】：

我已经为 React 中的拖放构建了一个包装器包，并添加了 storybook 示例。 由于在我的消费者中 React 是全球公开的，我没有明确导入 React。

在storybook 示例中，我需要提供React 作为自定义webpack 配置的一部分，但由于某种原因它无法解析React，我得到了ReferenceError: React is not defined

这是包裹 - https://github.com/fiverr/drag_n_drop_package

这是自定义的 webpack 配置文件：

const webpack = require('webpack');

module.exports = 
  plugins: [
    new webpack.ProvidePlugin(
      React: 'react'
    )
  ],
  module: 
    loaders: [
      
        test: /\.scss$/,
        loader: 'style!raw!sass'
      
    ]
  
;

【参考方案1】：

这真的很奇怪，但你的故事书 webpack.config.js 正在混合 webpack v1/v2。 将 webpack 导入为

const webpack = require('@kadira/storybook/node_modules/webpack');

解决了这个问题，因为它使用了与 storybook (v1) 相同的 webpack 引用。

【讨论】：

太棒了！常规构建使用 webpack 2，而 storybook 仅支持 webpack 1

【参考方案2】：

我在 github 的 webpack.config.js 中找到了以下代码：

externals: 
  react: 'React'

它看起来像this question。如果它需要从外部加载 React 库，比如 CDN。该页面必须确保有一个用于导入 React 库的脚本标签。并且确保这个脚本标签在bundle.js或者它由webpack生成的文件之前，这样当下面的代码需要使用React时，React的对象就会存在，例如：

<script src="./react.js"></script>
<script src="./bundle.js"></script>

【讨论】：

我在消费者中使用外部，因为它已经在全球范围内公开，但在故事书中我需要在构建时解决模块。无论如何，@enapupe 找到了我的错误，但感谢尝试，我很感激 :-)