IntelliJ IDEA / Webstorm 和 AngularJS / Ionic

Question

我喜欢多种技术结合在一起产生的效果...

以下 AngularJS 模板在 IDE ("can't resolve file") 中发出错误提示。我发现检查非常方便，我不想简单地关闭它。

/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 文件夹标记为 "resources root" 并使用绝对引用，因为 ionic 需要相对引用...

或者是吗？有没有办法在 cordova 方面解决此问题以允许绝对引用？即，因此在部署到 Android 时它不会中断（因为我们需要前缀文件：//android_asset/www/）

Answer 1

灵感来自 this answer, I ended up creating a recursive search/replace script in the build process. I made a cordova hook for "after_prepare" and used node with the 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: '=',
    paths: [
        wwwDir + '\components',
        wwwDir + '\index.html'
    ],
    recursive: true,
    silent: false
});

IntelliJ IDEA / Webstorm 和 AngularJS / Ionic

IntelliJ IDEA / Webstorm and AngularJS / Ionic

intellij-idea

webstorm

angularjs

cordova

ionic-framework