使用React Router和Webpack 2如何只在某些路由上需要外部库？
使用React Router和Webpack 2如何只在某些路由上需要外部库？
提问于 2017-02-13 23:03:53
目前正在工作
使用Webpack 2和React Router v4，我已经能够设置工作代码拆分。有一个中间的<AsyncComponent>，它解析promise并返回组件(在github问题上找到的模式)。
下面是一组路由示例：
<Switch>
<Route
path="me"
render={(props) =>
<AsyncComponent promise={ require.ensure([], (require) => require('./modules/Profile'), 'profile') } props={props} />
}
/>
<Route
path="credit-card"
render={(props) =>
<AsyncComponent promise={ require.ensure([], (require) => require('./modules/CreditCard'), 'credit-card') } props={props} />
}
/>
</Switch>目标
我想进一步扩展这一点，对于某些路由，只需要，就可以加载额外的库。在上面的示例中，我只想在信用卡路径上获取StripeJS (https://js.stripe.com/v2/)库。
我想强调的是，我可以直接加载条纹到页脚，一切正常工作。这里有多个库，我把它作为一个易于理解的例子来使用。
已尝试
已经尝试了以下几种方法，但收效甚微：
在webpack配置中标记外部库的
- 。这(正确地)将库标记为外部的，并且不会在请求的解析序列期间尝试捆绑它。然而，期望的是库是手动引入的。
- 我有过使用伪脚本加载器的想法(当遇到该路由时，手动创建一个具有
src属性的<script>，等待它加载，然后让组件完成它的工作。这个不错，但从可维护性的角度来看(如果需要两个或更多的库，我就需要复制笨拙的手动script加载)，这真的很糟糕，而且似乎与webpack的“方式”相反。
配置的相关部分
const core = [
'lodash',
'react',
'react-dom',
'axios',
'react-router-dom',
];
const config = {
context: path.resolve(__dirname, './ts_build'),
node: {
fs: "empty"
},
entry: {
app: './app.js',
core: core,
},
output: {
filename: '[name].js',
chunkFilename: '[name].[id].chunk.js',
path: path.resolve(__dirname, './../../public'),
publicPath: 'http://example.org/',
},
resolve: {
modules: [
path.resolve('./src'),
],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['core'],
minChunks: Infinity,
}),
new webpack.NamedModulesPlugin(),
],
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42207159
复制相关文章
相似问题
腾讯云开发者
