如何通过 webstorm 和 requirejs 使用 AMD 代码完成？答案

【问题标题】：How to use AMD code completion with webstorm and requirejs?如何通过 webstorm 和 requirejs 使用 AMD 代码完成？
【发布时间】：2014-05-18 01:22:00
【问题描述】：

我有这样的事情

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 如果您更改目录，上述方法不起作用，例如，下面的 Log 没有得到代码完成：

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

【问题讨论】：

目前没办法:(请投票给WEB-825
仅供参考，该票已解决并计划在 8.0 版本中发布。

标签： requirejs webstorm

【解决方案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 依赖项初始化的形式参数，并在项目中搜索模块引用而不是当前闭包中的变量引用：

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

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

更新二： 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) {
  ...
});

【讨论】：