我是JS库开发的新手,我正在try 做以下工作
- 创建一个带有Typescript 的库
- 使用WebPack5创建Bundle 包
- 将库发布到NPM
- 通过安装NPM包在其他项目中使用该库
我成功地创建了一个Bundle 包并将其上传到NPM.当我在新项目中安装程序包时,问题开始于步骤4.引用functions.ts
中的函数不起作用.但是,当我在script.js
中导入库时,将执行index.ts
中指定的代码,并且我可以看到日志(log)输出.为了能够引用像functions.ts
这样的其他文件中的函数和类,我应该在index.ts
中添加什么?该库将由前端JS文件使用.提前感谢您的帮助!
项目文件夹 struct
root
|-dist
| |-library.js
|
|-scr
| |-functions.ts
| |-index.ts
|
|-node_modules
我想使用index.ts
作为一个文件,它将包含对函数和类的所有引用.所以,那个文件里没有逻辑.
functions.ts个
export function add(x: number, y: number): number {
return x + y;
}
export function multiply(x: number, y: number): number {
return x * y;
}
export function subtract(x:number, y:number): number {
return x - y;
}
index.ts个
import * as func from './functions'
var f1 = func.add(2, 5);
console.log('f1 - ' + f1);
var f2 = func.subtract(6, 2);
console.log('f2 - ' + f2);
var f3 = func.multiply(10, 2);
console.log('f3 - ' + f3);
export { func }
tsconfig.json个
{
"compilerOptions": {
"target": "es6",
"lib": ["es6", "dom"],
"outDir": "src",
"sourceMap": true,
"strict": true,
"module": "ES2015",
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
webpack.config.js个
const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'eval-source-map',
mode: 'development',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: path.resolve(__dirname, 'node_modules'),
include: [path.resolve(__dirname, 'src')]
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'library.js',
path: path.resolve(__dirname, 'dist'),
library: 'library',
libraryTarget: 'umd',
umdNamedDefine: true
},
};
New project - script.js个
import * as lib from './node_modules/library/dist/library.js'
var a = lib.library.add(2, 9); // -- error, library is not found.
console.log(a);