无法引用 webpack 包中的函数

Question

我是 JS 库开发的新手，我正在尝试做以下事情

1. 使用 TypeScript 创建库
2. 使用 webpack5 创建一个包
3. 将库发布到 npm
4. 通过安装 npm 包在其他项目中使用该库

我成功创建了一个包并将其上传到 npm。当我在新项目中安装包时，问题在第 4 步开始。从

functions.ts

引用函数不起作用。但是，当我在

script.js

中导入库时，在

index.ts

中指定的代码被执行，我可以看到日志输出。我应该向

index.ts

添加什么以便能够从其他文件（如

functions.ts

）引用函数和类？该库将由前端 JS 文件使用。提前感谢您的帮助！

项目文件夹结构

root
|-dist
|  |-library.js
|
|-scr
|  |-functions.ts
|  |-index.ts
|
|-node_modules

我想将

index.ts

用作包含对函数和类的所有引用的文件。因此，该文件中没有逻辑。

函数.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: 'staxbill-internal-test.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'library',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
};

新项目 - 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);

Answer 1

你正在创建一个

umd

库，它不像它们被命名时那样普遍。您可以导入它们，它们的代码将运行，但它可以按预期导出。

您可能想使用不同的库类型，例如

module

（目前处于试验阶段，需要启用，详情请参阅链接）或

commonjs-static

。

这可以代替或添加到 umd 包中。你可以给 webpack 一个配置对象数组来以多种方式编译代码，并为不同的模块加载器配置你的 package.json conditional exports。