IntelliJ IDEA / Webstorm 和 AngularJS / Ionic

Posted 2023-03-14

【中文标题】IntelliJ IDEA / Webstorm 和 AngularJS / Ionic

【英文标题】：IntelliJ IDEA / Webstorm and AngularJS / Ionic

【发布时间】：2015-07-18 00:37:40

【问题描述】：

我喜欢多种技术结合在一起产生一种令人兴奋的...

以下 AngularJS 模板在 IDE 中报错（“无法解析文件”）。我发现检查非常方便，我不想简单地关闭它。

/my_project/www/templates/logo.html

...
<img src="img/logo.png"/>      <<< file at /my_project/www/img/logo.png
...

问题： 在这种情况下，我们如何让 IntelliJ IDEA 或 WebStorm 等 IDE 与 Ionic/AngularJS/Cordova 配合得很好？

注意：我不能简单地将 www 文件夹标记为“资源根”并使用绝对引用，因为 ionic 需要相对引用...

还是这样？有没有办法在 cordova 方面解决这个问题以允许绝对引用？即，因此在部署到 android 时它不会中断（因为我们需要前缀 file://android_asset/www/）

【参考方案1】：

受this answer 的启发，我最终在构建过程中创建了一个递归搜索/替换脚本。我为“after_prepare”制作了一个cordova钩子，并将节点与replace package一起使用。现在我可以使用绝对引用并获得 IDE 的全部优势...然后在构建时将它们转换为相对引用。

这是一个示例挂钩文件，可帮助您入门。如果您使用 angular/ionic，请不要忘记在 app.js 中为 css 文件或 templateUrl 添加引用。当然不要忘记根据您的需要修改平台细节。

#!/usr/bin/env node

var replace = require("replace");
var wwwDir = process.argv[2] + '\\platforms\\android\\assets\\www';

// convert all src and href tags to relative in index.html + components\*
replace(
    regex: '(src|href)=([\'"])/+',
    replacement: '$1=$2',
    paths: [
        wwwDir + '\\components',
        wwwDir + '\\index.html'
    ],
    recursive: true,
    silent: false
);