如何为自定义(vanilla Javascript)Ionic应用程序设置"build"脚本?



我是一名技术老师,正在为高中生设计一门编码课程。我想教他们Ionic,而不必教他们React、Angular或Vue。他们已经知道基本的网络开发,所以我希望他们能够只使用普通的Javascript+Ionic创建iOS、Android和网络应用程序。

当我跑";离子init";为了开始,我不得不从Angluar、React、Vue或Custom中进行选择。所以,当然,我选择自定义。

然后我开始构建一个";Hello World"应用程序。到了在Android Studio中查看简单应用程序的时候,我会运行"离子电容器添加android";然后";npx cap开放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.

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

谢谢你的帮助!

由于您使用的是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>

则CCD_ 3应该工作。(我假设以下初始化步骤ionic initnpm initionic capacitor add android(

我认为在进行任何更改之后需要的是运行npx cap sync,然后运行npx cap open android

最新更新