Webpack: как я могу использовать именованный экспорт в глобальной области?

Question

Этот пост: Can I use an ES6/2015 module import to set a reference in 'global' scope? отвечает на проблему «как сделать модуль доступным в глобальном масштабе в Webpack?» с помощью Webpack-х 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 
}) 

Итак, мой вопрос: есть ли способ, чтобы открыть именованный экспорт (. например РЕАКТ PropTypes) во всем мире с Webpack?

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 (в этом точном случае) с среагировать требуют вызова и доступа к его ребенок 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 
})