React +(Router) 没有 webpack 或 browserify

IT技术 reactjs browserify webpack react-router
2021-05-21 21:26:54

是否可以在不使用 browserify 或 webpack 的情况下使用 ReactRouter。我正在关注http://rackt.github.io/react-router 中的文档，他们需要 react 和 react-router ( require('react-router');)。如果我使用 browerifly，我生成的包大约是 1MB 文件大小，这听起来很多。

那么是否有可能让 reactrouter 与来自 CDN 的编译 JS 一起工作，例如https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js，而不是我自己捆绑所有要求？如果我尝试让它与 CDN 一起工作，我会收到一个错误，指出 Route 未定义。但看起来它是在cdn文件中导出的。

我想编译我的 JSX/ES6 react组件，包括 ReactRouter 和react JS 文件从 cdn 和只将我的组件捆绑到一个新的 js 文件中。

这是可能的还是 browserify 和 webpack 是设置项目的正确方法？（我查看了几个 github 存储库）。我有一些疑问，因为http://rackt.github.io/react-router/上没有安装指南

像这个伪html：

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

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

由于 React Router 也依赖于 React，因此使用 CDN/浏览器构建也需要React在window.React.

也就是说，您链接到的 CDN 版本本身是由 webpack 生成的，因此我不希望您获得任何文件大小改进。您可能会在 browserify 包上查看缩小/死代码消除，看看它是否减少了文件大小。

我想分享的另一个信息是在 webpack 配置中使用外部（https://webpack.github.io/docs/library-and-externals.html）的可能性。我使用它如下：

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

这会产生一个较小的包，您可以按照我的问题中的要求使用来自 CDN 的react。这也减少了 gulp 的构建时间。

其它你可能感兴趣的问题
上一篇Ender 3 v2 间歇性问题 - 清晰可见的图层 下一篇错误：不变违规：危险的RenderMarkup（...）：无法在工作线程中呈现标记