如何使用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模块是WebStorm 8的路线图.最近启动的早期访问程序仅提供AngularJS和Spy-js支持的预览,但AMD支持正在进行中,我希望它会出现在下一次更新中.

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

代码完成提供了许多"误报",您可以更好地了解对象的界面,并使用"IntelliSense"作为提示或帮助来完成长标识符; 我怀疑这个插件在这里有助于IDE:

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

插件注释:插件设置中配置文件的路径是相对于公共目录(基本URL).另外,我建议从github项目站点检出二进制包,它可能提供比WebStorm插件管理器更新的版本.(从那里下载的0.13固定版本的插件崩溃,而WebStorm IDE仍提供0.12.)

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

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

在WebStorm 8中似乎不再需要Require.js插件,它为WebStorm 7带来部分AMD支持.

更新II: Require.js插件仍然可以帮助WebStorm 8用户.它识别baseUrl并paths来自Require.js配置.您可以将模块路径前缀映射到不同的目录根,但仍需要"转到位置"功能:

// 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) {
  ...
});