使用 angular2 导入库 - webpack答案

【问题标题】：import library with angular2 - webpack使用 angular2 导入库 - webpack
【发布时间】：2017-02-13 02:03:43
【问题描述】：

我正在使用angular2-webpack starter，我想导入一个 npm 库，例如 Babylon js。我就是这样的

import * as BABYLON from 'babylonjs/babylon';

而Babylon自带一个d.ts文件，所以我放在文件开头

/// <reference path="../../../node_modules/babylonjs/babylon.d.ts" />

虽然我可以使用该库，但 Visual Studio Code 将其标记为错误并显示为 Exported external package typings file 'node_modules/babylonjs/babylon.d.ts' is not a module.，并且我无法使用打字附带的自动完成功能。我是 webpack 的新手，所以我不知道是否需要设置一些东西。我的配置是starter自带的。

这是导入外部库的正确方法吗？我还需要配置什么来消除该错误并使用自动完成功能？

【问题讨论】：

我意识到不用导入任何东西我就可以使用自动补全，但是当然 BABYLON 没有定义。所以我不知道如何导入 BABYLON 并保持打字。
在当前的 babylonjs 预览版中，有一个额外的模块文件（./dist/preview release/babylon.module.d.ts）。当尝试以这种方式在 angular2 中使用 babylonjs 时，我现在得到“环境上下文中不允许使用初始化程序。”。同时你有成功吗？

标签： angular typescript webpack visual-studio-code babylonjs

【解决方案1】：

第一：

npm install babylonjs babel-types
typings install dt~babylon --save --global
typings install dt~babel-types --save --global

然后在你的代码中：

var BABYLON = require('babylon');

【讨论】：

babel-types 是干什么用的？
在围绕 SO 和 Github 寻找解决方案后，这是真正为我工作的解决方案，无需手动编辑 npm 包的 d.ts 文件。不，你不需要 babel 打字。