如何为自定义（vanilla Javascript）Ionic 应用程序设置“构建”脚本？

Posted 2023-03-16

技术标签:

【中文标题】如何为自定义（vanilla Javascript）Ionic 应用程序设置“构建”脚本？【英文标题】：How do I setup a "build" script for a custom (vanilla Javascript) Ionic app? 【发布时间】：2021-06-10 18:23:28 【问题描述】：

我是一名技术教师，正在为高中生设计一门编码课程。我想教他们 Ionic 而不必教他们 React、Angular 或 Vue。他们已经了解基本的 Web 开发，所以我希望他们能够仅使用原生 javascript + Ionic 创建 ios、android 和 Web 应用程序。

当我运行“ionic init”开始时，我不得不从 Angluar、React、Vue 或 Custom 中进行选择。所以，当然，我选择自定义。

然后我开始构建一个“Hello World”应用程序。在 Android Studio 中查看简单应用程序时，我运行“离子电容器添加 android”，然后运行“npx cap open android”。都很好。

当我开始向我的简单应用程序添加更多内容，然后尝试在 Android Studio 中查看这些更改时，就会出现问题。通常，这将通过运行“离子电容器复制安卓”来完成。但这在我的自定义应用程序中不起作用。我收到此错误消息：

[ERROR] Cannot perform build.

Since you're using the custom project type, you must provide the ionic:build npm script so the Ionic CLI can build your project.

我该如何解决这个问题？ 如何为我的自定义应用提供构建脚本？

感谢您的帮助！

【问题讨论】：

【参考方案1】：

由于您使用的是 vanilaJS，因此您根本不需要任何构建步骤。只需将您的index.html 放入www 文件夹，并包含一些内容。你可以从类似的东西开始

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Ionic without any framework</title>

    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css"/>
</head>
<body>

<!-- We create a vanilla Javascript function to call the alert -->
<script>
    hello = async function () 
        alert('Hello World!');
    ;
</script>

<!-- We declare an Ionic app using the <ion-app/> element -->
<ion-app>
    <!-- Cool thing, the Ionic CSS utilities could be used too -->
    <ion-content text-center>
        <h1>Basic usage</h1>
        <!-- We add an ion-button with an onclick event -->
        <ion-button onclick="hello()">Click me</ion-button>
    </ion-content>
</ion-app>

</body>
</html>

然后ionic capacitor copy android 应该可以工作。（我假设遵循初始化步骤ionic init、npm init、ionic capacitor add android）

【讨论】：

非常感谢您的详细回答。不幸的是，我已经完成了你所说的一切。 “离子电容器添加安卓”工作正常。但是“离子电容器复制安卓”特别抛出一个错误，指出“您必须提供 ionic:build npm 脚本，以便 Ionic CLI 可以构建您的项目。” 现在，我能做的最好的就是每次我需要在 Android Studio 中查看更改时删除 android 文件夹。删除文件夹后，不仅需要重新运行“离子电容器添加android”，还需要在Android Studio中重新打开android文件夹，比较麻烦。 “ionic serve”命令——允许我在网络浏览器中查看应用程序——给出了类似的错误。它说：“您必须提供 ionic:serve npm 脚本，以便 Ionic CLI 可以为您的项目提供服务。”幸运的是，我找到了解决这个问题的方法——我只是使用 Visual Studio Code 的“Live Server”扩展在本地为应用程序提供服务。你有什么版本的ionic cli？【参考方案2】：

我也有同样的问题:(

我的团队从http://www.javadecompilers.com/apk 获得了一个 Ionic 框架应用程序，它仅附带资源/和源/（代码还可以，但现在如何构建？它不是 Vue、React 和 Angular）

应用程序使用cordova构建到android，并按照Tomas提出的步骤，CLI在到达“离子电容器添加android”（使用cordova）步骤时询问构建脚本。

【讨论】：

【参考方案3】：

因为看起来你正在尝试教他们开发的基本原理，所以我什至不会使用 Ionic。它是一个跨平台开发的框架。一旦您选择使用该框架，您不妨购买其中一个 Javascript/Typescript 开发框架，以获得它们带来的优势。

对于针对 iOS 和 Android 的 POJO 工作，我会investigate using Cordova.

请考虑一下在四轨磁带机上教学生录音基础知识与在 128 轨数字录音棚上花里胡哨的区别。

许多基础是相同的，没有所有改进的复杂性。

在我从事企业级财务应用程序的日常工作中，我们仍然使用 Cordova，并且近期没有迁移计划。

在我公认的有偏见的观点中，Cordova 将是一个基于“普通旧 Javascript 对象”的跨平台开发介绍的更好起点。

这将使向离子和电容器的飞跃更容易。