Question

这篇文章：Can I use an ES6/2015 module import to set a reference in 'global' scope?回答了问题＆＃34;如何在Webpack中全局提供模块？＆＃34;使用Webpack＆＃39; ProvidePlugin：

// webpack.config.js
plugins: [
    new webpack.ProvidePlugin({
        React: "react",
    })
],

// Foo.js
class Foo extends React.Component { // React is global

但是，如果我想为命名导出创建全局而不是默认导出呢？换句话说，如果我想做什么：

// Foo.js
class Foo extends React.Component {
    propTypes = {
        bar: PropTypes.string, // PropTypes were never imported
    }

问题是PropTypes是一个命名导出，这意味着我通常会将其导入为：

import {PropTypes} from 'react';

但我无法在Webpack配置中执行此操作：

new webpack.ProvidePlugin({
    {PropTypes}: "react", // this doesn't work
})

所以，我的问题是：有没有办法用Webpack全局公开命名导出（例如React＆＃39; s PropTypes）？

P.S。我会在我的根JS文件中明确地执行它：

// index.js
import {PropTypes} from 'react';
global.PropTypes = PropTypes;
import 'restOfMyCode';

但是这不起作用，因为导入是在global.PropTypes设置之前被挂起并发生的，所以当我的模块被导入时，没有global.PropTypes可供他们使用。

Answer 1

你能做什么（但它不是很干净）如下：

new webpack.DefinePlugin({
  PropTypes: 'require("react").PropTypes',
})

这将使webpack简单地将每个提及PropTypes（在该确切情况下）替换为react require调用并访问它的子PropTypes。它不是最有效的东西，但它会做你需要的！

另一个解决方案是简单地将PropTypes自己导出为另一个文件中的默认导出，然后将其传递给ProvidePlugin并使用绝对路径。

在文件中（例如proptypes.js）：

import { PropTypes } from 'react';
export default PropTypes;

然后在你的webpack配置中：

new webpack.ProvidePlugin({
    PropTypes: require('path').resolve('../src/proptypes.js'), // absolute path here, otherwise the require might fail since a relative path is not always the same depending on where PropTypes are used
})

Webpack：如何在全局范围内使用命名导出

1 个答案: