不使用webpack或browserify的React+(Router)

Question

不使用webpack或browserify的React+(Router)

6

有没有可能在不使用browserify或webpack的情况下将React和ReactRouter一起使用？我正在遵循来自http://rackt.github.io/react-router的文档，它们要求使用react和react-router（require('react-router');）。如果我使用browerify，我的生成包大约为1MB的文件大小，听起来好像有点多。因此，是否有可能让reactrouter使用CDN中包含已编译的JS，例如https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js，而不是自己打包所有要求？如果我尝试使用CDN使其工作，会出现Route未定义的错误。但是看起来它在cdn文件中已导出。我想编译我的JSX / ES6 react组件并从cdn中包含ReactRouter和React JS文件，仅将我的组件捆绑到新的js文件中。这是可能的吗，还是browserify和webpack是设置项目的正确方式？（我查看了几个github存储库）。我有些怀疑，因为http://rackt.github.io/react-router/上没有安装指南。类似于这样的伪html：

<head>
    CND :include react, react-router
    my code combinded.js
</head>

- svenhornberg

2个回答

2

我想分享的额外信息是在webpack配置中使用externals（https://webpack.github.io/docs/library-and-externals.html）的可能性。

我按照以下方式使用它：

externals: {
  "react": "React",
  "react/addons": "React",
  "reflux" : "Reflux"
}

这会导致更小的捆绑包，您可以像在我的问题中提问一样从CDN使用React。这还可以通过gulp减少构建时间。

- svenhornberg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michelle Tilley · Accepted Answer

当您使用CDN提供的预构建版本时，该库会导出到 window.ReactRouter 上。因此， Route 在 window.ReactRouter.Route 上定义。

由于React Router还依赖于React，因此使用CDN /浏览器版本还需要在 window.React 上可用的 React 。

话虽如此，您链接的CDN版本本身是使用webpack生成的，因此我不希望您会获得任何文件大小的改进。您可以查看您的browserify捆绑包上的缩小/死代码消除，以查看它是否会减小文件大小。