我是JS库开发的新手,我正在try 做以下工作

  1. 创建一个带有Typescript 的库
  2. 使用WebPack5创建Bundle 包
  3. 将库发布到NPM
  4. 通过安装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);

推荐答案

您正在创建一个umd的库,它不像它们被命名时那样普遍.您可以导入它们,它们的代码将运行,但不会按预期导出.

您可能希望使用不同的library type,如module(目前处于试验阶段,需要启用,详情请参阅链接)或commonjs-static.

这可以作为UMDBundle 包的替代或补充来完成.您可以为webpack提供一个配置对象数组,以多种方式编译代码,并为不同的模块加载器配置您的Package.json conditional exports.

Javascript相关问答推荐

try 在addEventHandler内设置表单的文件输入.值=空

我可以后增量超过1(最好是内联)吗?

如何expose 像React在onChange、onClick等中所做的那样的参数?

在JavaScript中打开和关闭弹出窗口

在JavaScript中,是否有一种方法可以创建自定义thable,在等待某些代码后自动触发它?

如何按预期聚合SON数据?

如何使用侧边滚动按钮具体滚动每4个格?

InDesign—创建一个独立的窗口,在文档中进行更正时保持打开状态

Angular 17—每当一个布尔变量变为真时触发循环轮询,只要它保持为真

cypress中e2e测试上的Click()事件在Switch Element Plus组件上使用时不起作用

用于编辑CSS样式的Java脚本

保持物品顺序的可变大小物品分配到平衡组的算法

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗?没有SQL或任何数据库.只有HTML语言

正则表达式,允许我匹配除已定义的子字符串之外的所有内容

用于在路径之间移动图像的查询

Angular 形式,从DOM中删除不会删除指定索引处的内容,但会删除最后一项

为什么我的按钮没有从&q;1更改为&q;X&q;?

使用插件构建包含chart.js提供程序的Angular 库?

在SHINY R中的嵌套模块中,不能使用Java代码

删除加载页面时不存在的元素(JavaScript)