导入第三方库

Question

我需要在 angular2 项目中导入第 3 方库。

这是我所做的：

ng new myproject
npm install --save createjs-easeljs
npm install @types/easeljs

现在是我陷入困境的时刻。如何导入和使用这个库？有Shape或Stage之类的对象

import { Shape, Stage } from '../../../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js';

这根本不起作用。

我的文件夹结构：

dynam194:src timo$ tree -L 2
.
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   └── canvas
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.json
└── typings
    └── easeljs.d.ts

tsconfig.json

"paths": {
  "easeljs": ["../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js"]
},
"sourceMap": true,
"target": "es5",
"typeRoots": [
  "../node_modules/@types",
  "typings",
]

Answer 1

您必须将路径（和 baseUrl）添加到您的 tsconfig.json：

{
  "compilerOptions": {
    ...
    "baseUrl: ".",
    "paths": {
      "easeljs": ["../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js"]
    },
  }
}

easeljs 的路径相对于您的tsconfig.json。

之后，您可以使用以下方法导入此库：

import * as createjs from 'easeljs';

并在您的项目中使用它，例如：

let stage: createjs.Stage = new createjs.Stage('myCanvas');
let shape: createjs.Shape = new createjs.Shape();

因为@types 定义文件都有自己定义模块的方式，您可能会遇到与这种导入方式不兼容的方式。但据我所知，他们希望将其作为标准。

您应该创建一个本地类型文件夹并创建一个 easeljs.d.ts 文件，其中包含：

/// <reference path="../../node_modules/@types/easeljs/index.d.ts" />

declare module "createjs" {
    export = createjs;
}

确保引用路径指向正确的目录，我不知道你的项目结构:)

然后将本地类型文件夹添加到您的tsconfig.json 的typeRoots 属性：

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "../node_modules/@types",
      "typings/local"
    ]
   }
}

更新

显然，这不适用于这个库。很遗憾。好在 angular-cli 有一个预加载脚本的选项：

编辑您的 angular-cli.json 以添加库：

{
  "apps": [
    {
      ...
      "scripts": [
        "../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js"
      ],
    }
  ]
}

不要在文件顶部使用导入，因此请删除 import * as createjs from 'easeljs'。并且不需要本地类型文件夹。还要删除tsconfig.json 中的paths