如何使用webstorm和requirejs完成AMD代码？

Question

我有类似的东西

define(function(require) {

    var Router = require('./router');
    var Backbone = require('backbone');
    var Log = require('log');

...

显然，Webstorm旨在支持AMD模块，但我无法使其工作，而是从项目中的每个.js文件中获取大量属性。

有没有人有幸使用requirejs模块完成/重构Webstorm代码？

更新，如果我遵循以下构造

，我就能使其正常运行

define(['backbone', './router', './log'], function(Backbone, Router, Log) {

但是，所有路径都必须是相对的。对于在require.config中配置的路径，这是不切实际的，因此Backbone没有代码完成。

requirejs.config({
    baseUrl: 'js',

    paths: {
        'backbone' : '../bower_components/backbone/backbone-min',
...

另外，当存在许多依赖项时，上面的语法会变得很丑陋......

更新2 如果更改目录，则上述操作无效，例如，下面的日志无法完成代码：

define(['backbone', './router', '../utils/log'], function(Backbone, Router, Log) {

Answer 1

如上所述，AMD和CustomJS模块的支持位于roadmap for WebStorm 8。早期访问计划started recently仅提供AngularJS和Spy-js支持的预览，但AMD支持正在进行中，我希望它会出现在下一次更新中。

同时，您可以尝试Require.js plugin，它为requirejs模块提供部分支持。您将获得define调用中模块依赖项的路径完成，包括requirejs插件识别：

代码完成提供了许多“误报”，您最好学习对象的界面并使用“IntelliSense”作为提示或帮助来完成长标识符;我怀疑这个插件在这里有助于IDE：

查找用法或重构（重命名文件和重命名对象）等其他功能在模块闭包的边界不起作用。你最好使用路径替换功能...

插件注释：插件设置中配置文件的路径是相对于公共目录（基本URL）。另外，我建议从github project site查看二进制包，它可能提供比WebStorm插件管理器更新的版本。 （从那里下载的0.13修复了我的项目插件的固定崩溃，而WebStorm IDE仍然提供了0.12。）

更新：问题WEB-825似乎在WebStorm-134.1081 downloadable from EAP中得到部分修复。 Find Usages功能可识别从requirejs依赖项初始化的形式参数，并搜索项目中的模块引用，而不是当前闭包中的变量引用：

重构有所改善。 projtect 中的重命名文件确实影响所有模块引用，但它引入了requirejs基目录（URL）的相对路径。例如，将toolitems.js目录中的src/model重命名为menuitems.js会将所有引用从“model / toolitems”更改为“../model/menuitems”;提供requirejs基目录位于src目录中。 重命名方法适用于整个项目。 重命名对象仅在当前闭包的范围内有效。应该全球工作？你可以故意为每个带有Require.js的闭包中的同一模块导出选择不同的对象名称......但是，使用相同的名称来保持一致性是一个好习惯，这里的改进会很好。

在WebStorm 8中似乎不再需要为WebStorm 7提供部分AMD支持的Require.js插件。

更新II： Require.js插件仍然可以帮助WebStorm 8用户。它从Require.js配置中识别baseUrl和paths。您可以将模块路径前缀映射到不同的目录根，但仍需要“转到位置”功能：

// file configured for the Require.js config file path
require.config({
  paths: {
    core: '../core/src',
    recman: '../recman/src',
    app: '.'
  }
});

// Example of a module from the app project
define([
  'core/model/node', 'recman/model/hold, 'app/view/manager'
], function (NodeModel, HoldModel, ManagerView) {
  ...
});