在 Typescript 中找不到名称“require”答案

【问题标题】：Cannot find name 'require' in Typescript在 Typescript 中找不到名称“require”
【发布时间】：2017-02-02 23:00:34
【问题描述】：

根据建议，这个问题已经被问了很多次，但我在答案中没有看到任何可以解决我的问题的东西。

我在 Visual Studio 2015 中创建了一个新的 ASP.NET Core 项目，目标是提供一个 Angular2 TypeScript 应用程序并使用 Webpack 打包脚本。我正在重新利用 Webstorm 项目中的一些组件（同样的东西 - Angular2 和 TypeScript），它在那里工作得很好。

不幸的是，我刚刚复制了第一个组件，发现我遇到了一个无法自行解决的错误。在 Visual Studio IDE 中，“require”下出现红色波浪线，鼠标悬停文本显示“找不到名称 'require'。无法解析符号 'require'”。

这是有问题的组件文本（用于 webpack/Angular2 的 require 语法）：

@Component({
    selector: "myComponent",
    template: require("./myComponent.html"),
    styles: [require("./myComponent.css")]
})

同样，我在下面的 sn-p 中也遇到了同样的问题：

const sortBy = require('lodash.sortby');

现在，other 帖子有一个 answer 和 suggests，我将 typeRoots 和类型添加到 tsconfig.json 的 compilerOptions。我在这里看到了：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node",
      "lodash.sortby"
    ]
  }
}

当然，我已经将这些包添加到了我的 package.json 中：

{
  "dependencies": {
    "lodash.sortby": "^4.7.0"
  },
  "devDependencies": {
    "@types/node": "^6.0.60",
    "@types/lodash.sortby": "^4.7.0"
  }
}

我已经成功地 npm 安装了这些（以及许多其他文件）。

上面的后一个链接表明我可以将以下内容放在文件的顶部，但这似乎很老套，并不是我真的想在解决方案中无限期地坚持下去，尽管不可否认，它确实解决了问题：

declare var require: any

如前所述，这种使用 require 在 Webstorm 中运行良好，而且我在两个 IDE 之间的配置相同。 Visual Studio 发生了什么，这不仅仅是工作？

谢谢！

编辑：

我从那以后了解到 angular2-template-loader 的存在。由于我希望在这里使用带有 Angular2 的 Webpack，这就是我使用 require （根据他们的文档）的原因，但是这个 angular2-template-loader 负责让您将 templateUrl 和 styleUrls 作为相对引用（因此不使用 require指向文件），并且会在打包过程中为您交换所有内容。

在其他任何地方使用 require 仍然需要 Gary 的 Typescript 模块链接中所述的解决方法。

【问题讨论】：

stackoverflow.com/questions/36434546/… 。 Require 用于模块。 typescriptlang.org/docs/handbook/modules.htmlDepending on the module target specified during compilation, the compiler will generate appropriate code for Node.js (CommonJS), require.js (AMD), isomorphic (UMD), SystemJS, or ECMAScript 2015 native modules (ES6) module-loading systems. For more information on what the define, require and register calls in the generated code do, consult the documentation for each module loader.
@Gary 你能把它写出来作为答案，这样我就可以这样标记了吗？

标签： typescript visual-studio-2015

【解决方案1】：

我已经通过安装最新（目前）版本的 TypeScript for Visual Studio 2015 解决了这类问题。目前它是2.1.5。并更新 ReSharper，如果您使用它到版本 2016.3.2。

【讨论】：

【解决方案2】：

请查看Using require to set templateUrl in Angular 2 while getting error

现在可能无法实现，因为 commonjs 是一个模块系统。 https://www.typescriptlang.org/docs/handbook/modules.html

根据编译期间指定的模块目标，编译器将为 Node.js (CommonJS)、require.js (AMD)、同构 (UMD)、SystemJS 或 ECMAScript 2015 原生模块 (ES6) 模块生成适当的代码-装载系统。有关生成代码中的定义、要求和注册调用的作用的更多信息，请参阅每个模块加载器的文档。

【讨论】：