我在我的打字稿项目中正确导入 PIXI js 时遇到了一个奇怪的问题。
问题是我在引用 PIXI 对象时从来不需要使用 PIXI 前缀。
例如代替:
let s = new PIXI.Sprite(textureName);
我必须做:
let s = new Sprite(textureName);
一切正常,只是有点烦恼。我有一种感觉,这就是我的 tsconfig.json 文件的配置方式。
我该如何配置它,使其表现得像第一个选项?
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"target":"es2015",
"moduleResolution": "node"
}
}
这是我的package.json
{
"name": "tester",
"version": "1.0.0",
"description": "",
"private": true,
"dependencies": {
"gsap": "^2.1.3",
"howler": "^2.1.1",
"rxjs": "^6.4.0"
},
"devDependencies": {
"@types/facebook-js-sdk": "^3.3.0",
"@types/gsap": "^1.20.2",
"@types/howler": "^2.0.5",
"@types/pixi.js": "^4.8.7",
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"npm-install-webpack-plugin": "^4.0.5",
"pixi.js": "^5.0.3",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC"
}
这是一个示例 ts 文件。
import { Sprite, Texture } from "pixi.js";
import { IGameComponent } from "../interfaces/game-component.interface";
export class BaseSprite extends Sprite implements IGameComponent {
constructor(texture?: Texture) {
super(texture);
this.interactive = false;
this.interactiveChildren = false;
}
init(): void {
}
update(delta: number): void {
}
}
你应该像这样导入PixiJS:
import * as PIXI from "pixi.js";
这将从 pixi.js 导入所有元素并将它们放入
PIXI
命名空间中。
您当前所做的只是导入一些元素并将它们直接放入
Sprite
和 Texture
变量中:
import { Sprite, Texture } from "pixi.js";
ES 模块语法可能会令人困惑,但它提供了很大的灵活性。您可以精确限制导入的内容。您还可以根据需要重命名任何模块或模块的一部分。 (当两个库使用相同名称时很有用)。此参考列出了 所有可以使用的方法
import
。
更新:
此外,一些插件假设全局命名空间中存在
PIXI
。从版本5开始,不再有全局的PIXI
。 v5 迁移指南 解释了如何解决此问题:
快速而肮脏的修复方法是将
PIXI
放入全局命名空间中,如下所示:
import * as PIXI from 'pixi.js';
window.PIXI = PIXI; // some bundlers might prefer "global" instead of "window"
更好的解决方案是在 webpack 配置中填充
PIXI
全局。 (请参阅上面链接的详细信息。)
对于 pixi.js v5,您应该将“pixi.js”模块添加到 tsconfig.json 中,就像编译器选项部分中的类型一样。并删除 @types/pixi.js 模块。
tsconfig.json
{...
"compilerOptions": {
...,
"types": ["pixi.js"],
}
}
您可以使用 npm 包中的类型定义:
tsconfig.json
{...
"compilerOptions": {
...,
"typeRoots" : ["node_modules/pixi.js"],
"types" : ["pixi.js"],
}
}