Webpack + `create-react-app` | ProvidePlugin 未将 React 作为模块加载

Posted 2023-03-07

【中文标题】Webpack + `create-react-app` | ProvidePlugin 未将 React 作为模块加载

【英文标题】：Webpack + `create-react-app` | ProvidePlugin Not Loading React as a Module

【发布时间】：2019-10-28 11:21:13

【问题描述】：

* 注意：我对 Webpack 几乎一无所知。

我想通过ProvidePlugin 加载Webpack 中的react 节点模块和其他模块，以便全局访问它们。

我创建了一个create-react-app 并运行eject 并访问了Webpack create-react-app 提供的预定义配置。

我在this post 中阅读了有关通过PluginProvidor 全局加载react 的信息，并在Webpack docs 中阅读了有关PluginProvidor 本身的信息，后者指出：

默认情况下，模块解析路径为当前文件夹（./**）和node_modules

基于此，在webpack.config.js，plugins，我添加了以下PluginProvidor：

...
plugins: [
  new webpack.ProvidePlugin(
    
      React: 'react'
    
  )
]
...

但它不起作用 - 在 JSX 文件中，当我调用 React（例如 class MyComponent extends React.Component ... ）时，我收到一个错误，指出未定义 React（以及必须在其中定义 React 的特定于 React 的错误JSX 文件）。

为什么它不起作用？据我了解，我给出了我在 JSX 文件中调用的相同标识符，就像我提到的，根据 Webpack 文档，node_modules 中的 react 模块的路径 - 两者都是它所需要的上班。

我的配置文件：webpack.config.js

【问题讨论】：

根据报错，import React from 'react'是MyComponent文件吗？

到目前为止，直到尝试使用PluginProvidor，我有。它有效，当我import它时它仍然有效。当我删除 import 声明并尝试通过 PluginProvidor 加载它时，它不会被加载。

没关系，你必须导入它

但是 PluginProvidor 不为我做加载吗？我认为这就是PluginProvider 的重点——它会自动加载模块并使它们在全球范围内可用。

显示所有 webpack 配置，尝试新的 webpack.PluginProvider ...

【参考方案1】：

not a good idea 用于使用 ProvidePlugin，even worse 用于eject 您的 CRA。

使用全局变量而不是 ProvidePlugin：

// globals.js
import React from 'react';

window.React = React;

然后import './globals'

import './globals';

// no need import React
import ReactDOM from 'react-dom';
...

要向 CRA web pack 添加插件，请参阅react-app-rewired。

添加插件示例：

/* config-overrides.js */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) 
  if (!config.plugins) 
    config.plugins = [];
  
  config.plugins.push(new MonacoWebpackPlugin());
  return config;
;

演示：