Исключить реакцию из пакета webpack

Я пытаюсь исключить реакцию из моего пакета, который создается webpack. Причина в том, что у нас есть глобальная версия реакции, доступная на странице, поэтому я буду использовать ее.

Я попытался использовать ниже, как это предложено здесь Webpack и внешние библиотеки, но это, похоже, не работает. Я вижу, что webpack экспортировал React, но он все еще появляется в комплекте.

externals: {
  'react': 'React'
}

Я думал, что это может быть другая зависимость, например. реагировать на импорт реактора? Кто-нибудь смог это сделать?

Ответ 1

У меня была такая же проблема, как и у вас. Застрял на одну ночь, нашел ответ, react-dom требует react/lib/ReactDOM, который по-прежнему включает react в комплекте. Решение выглядит следующим образом:

externals: {
 'react': 'react', // Case matters here 
 'react-dom' : 'reactDOM' // Case matters here 
}

Затем добавьте react-dom к тегу script на вашей странице.

Ответ 2

webpack config:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter'
}

добавьте их в конец тела index.html.

<script src="http://cdn.bootcss.com/react/15.4.1/react.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.1/react-dom.js"></script>
<script src="http://cdn.bootcss.com/react-router/2.8.1/ReactRouter.js"></script>

а в вашем entry файле, возможно, index.js:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');

const App = () => {
    return <div>
        webpack externals
    </div>
};

ReactDOM.render(
    <App/>,
    document.getElementById('container')
);

Ответ 3

Вы можете просто создать несколько записей, чтобы отделить их от приложения. Вы можете, например, сделать следующее, используя webpack CommonsChunkPlugin:

module.exports = {
entry: {
    "app": "your app entry file",
    "react" : "react"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js")
   ]
}