排除来自webpack bundle的反应

Question

我正在尝试排除webpack生成的bundle的反应.原因是,我们在页面上有一个全局版本的反应,所以我将使用它.

我已尝试使用下面的内容,如此处建议的Webpack和外部库,但这似乎不起作用.我可以看到webpack已经导出了React但它仍然出现在bundle中.

externals: {
  'react': 'React'
}

我在想它可能是另一个依赖,例如反应路由器导入反应？有没有人设法做到这一点？

Answer 1

我遇到了和你一样的问题.被困了一晚,找到了答案,react-dom要求react/lib/ReactDOM,其中还包括react在捆绑中.解决方案如下所示:

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

然后添加react-dom到页面中的脚本标记.

Answer 2

webpack 配置:

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')
);

Answer 3

您只需创建多个条目即可将 React 与应用程序包分开。例如，您可以使用 webpack CommonsChunkPlugin 执行以下操作：

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