Question

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

这是我做的：

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定义文件都有自己定义模块的方式，所以你可能会遇到一种与导入方式不兼容的文件。据我所知，他们希望将其作为标准。

您应该创建一个本地typings文件夹并创建一个包含以下内容的easeljs.d.ts文件：

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

declare module "createjs" {
    export = createjs;
}

确保引用路径指向正确的目录，我不知道您的项目结构：）

之后，将本地typings文件夹添加到typeRoots的{{1}}媒体资源中：

tsconfig.json

<强>更新

显然，这对此库不起作用。不幸。好的事情angular-cli有一个预加载脚本的选项：

修改您的{ "compilerOptions": { ... "typeRoots": [ "../node_modules/@types", "typings/local" ] } }以添加库：

angular-cli.json

请勿在文件顶部使用导入，因此请删除{ "apps": [ { ... "scripts": [ "../node_modules/createjs-easeljs/lib/easeljs-0.8.2.min.js" ], } ] }。而且不需要本地打字文件夹。同时删除import * as createjs from 'easeljs'

中的paths

导入第三方库

1 个答案: