導入第三方庫

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;
}

確保參考路徑指向正確的目錄，我不知道您的項目結構:)

之后，添加本地文件夾，分型對typeRoots你的財產tsconfig.json ：

{
  "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，因此import * as createjs from 'easeljs'刪除import * as createjs from 'easeljs' 。 並且不需要本地類型文件夾。 還要刪除tsconfig.json中的paths