万事如意!突然遇到一个问题。有一个任务——收集一个小lib,放到npm中,方便以后使用。一切都在进行,但最终它不会开始。现在我会告诉你我在做什么。
package.json这里只是一点点。Webkak 和 typescript,其实就是这样。
{
"name": "testlib",
"version": "1.0.0",
"description": "",
"main": "lib/index.js",
"files": [ "lib" ],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
接下来,有 2 个带有代码的 ts 文件和一个可以导出所有内容的 index.ts。
数字掩码.ts
export function maskString(str: string, mask: string): string | undefined {
// тут какой-то код
}
滚动锁定.ts
export class Scroll {
constructor() { }
lock(): void {
document.body.style.overflow = 'hidden';
}
unlock(): void {
document.body.style.overflow = 'auto';
}
}
索引.ts
export { maskString } from './digitMask';
export { Scroll } from './scrollLock';
也就是说,最终,所有内容都收集在一个带有 .d.ts 文件的 index.js 中。我将此库安装到本地项目npm i /local/path/to/project中。IDE在项目中找到了这个依赖,在IDE本身我可以清楚地看到类方法,但是当我尝试使用它时,我得到了一些错误,比如Scroll这不是构造函数,第一个文件中的函数不是一个函数。像这些
Uncaught TypeError: testlib__WEBPACK_IMPORTED_MODULE_0__.Scroll is not a constructor
我尝试使用此代码运行它
import { Scroll } from 'testlib';
import { maskString } from 'testlib';
console.log(Scroll, maskString);
console.log(maskString('123456', '###-###'));
let locker = new Scroll();
locker.lock();
我肯定在一些小事上弄错了,但是第三天我找不到门框。谁能告诉我有什么问题,请告诉我:)
一般来说,问题出在 webpack 配置中。
outputconfig 字段必须表明我们正在构建一个库。我还没有弄清楚它是如何工作的,但它确实有效。看起来像这样