使用 Cordova + Onsen + React 进行初始项目设置的分步指南

Posted 2023-05-06

【中文标题】使用 Cordova + Onsen + React 进行初始项目设置的分步指南

【英文标题】：Step by step guide for initial project setup using Cordova + Onsen + React

【发布时间】：2017-08-08 19:34:54

【问题描述】：

是否有关于如何从头开始创建 Onsen UI 2 + React + Redux + Cordova 应用程序的良好分步指南？

那里有很多指南，但几乎没有一个说明初始项目设置：要安装哪些 npm 包以及如何安装。你如何创建项目，如何构建它，css 去哪里，逻辑去哪里等等。

上周我阅读了很多关于 Onsen 和 React 的文章和教程。但是我仍然没有清楚地了解所有这些东西如何在一个真实的项目中协同工作。我缺乏基础知识。

像一个小的分步指南：

使用 npm 并安装以下软件包... 这个包做这个和这个，你必须像那个那样配置它...... 要创建一个将使用 Cordova + Onsen + React + Redux 并使用 Babel 和 WebPack 的项目，您必须使用 this 和 this...并在以下文件中进行以下配置... 好的，您已经创建了项目！好的！现在这是使用cordova初始化应用程序的正确方法......（因为我不明白我必须如何初始化它......我应该使用Cordova onDeviceReady？还是ons.onReady？或其他什么？） 您必须像这样构建您的项目...因为它会带来以下好处... 还有几个额外的库可以帮助您，让您的生活更轻松... 这是一个工作项目示例，其中包含代码，您可以在其中看到所有内容：正确的应用初始化、出色的结构、使用商店和异步 Web 服务...

如果有人知道在哪里可以找到此指南，或者可以创建此指南，请这样做！

【参考方案1】：

我用 React + Onsen UI + Redux + Webpack 2 的基本设置创建了一个 repo。你可以在有或没有 Cordova 的情况下使用它，只需键入 npm run 即可查看可用命令。如果你对 Webpack 有所了解，应该很容易理解配置。

Here is the repo

这不是一个指南，而是一个例子，但它应该对你有很大帮助（我希望）

【讨论】：

我正在使用这个看起来像“官方”的 github.com/monaca-templates/onsenui-v2-react-minimum 但似乎 monaca preview 仍然无法访问 Cordova 插件 (cordova.js)。所以我真的不明白使用它与任何其他 React+Webpack 样板（如 Create React App）相比有什么好处。你的支持吗？

Preview 基本上是在运行webpack-dev-server，所以不会有cordova（由“cordova run”本身添加）。这就是为什么它被命名为预览（它只是为了让你可以看到 UI 正在运行）。我的仓库就是你所描述的，一个 React+Webpack 样板。与 Create React App 之类的不同之处在于它具有 Onsen UI。如果您不使用他们的 IDE + 在线付费工具，我不建议您使用 monaca，因为它添加了不必要的代码，而且它使用了在您的控制之外缓存的 node_modules（很多包也已过时/不推荐使用）

要使用cordova运行“预览”，你应该在监视模式下运行webpack，同时运行“cordova运行浏览器”

还有一件事，我实际上做了回购，因为我对整个 mocana 的事情不满意

是的，我也做了这样的设置，就像你描述的那样使用浏览器平台。我可能会在 Github 上发布。