typescript - 尝试将 typescript 库与 webpack 捆绑时导出未定义

Question

我有一个用 typescript 开发的库。我有通过 tsc 构建它以将其用作 npm 包的解决方案，但 tsc 单独翻译每个文件。我想使用 webpack 将所有内容捆绑在一个缩小的文件中，但它不起作用。我做了一些测试(使用 module.exports/require 在 JS 中创建了一个简单的包并且它工作了，一个使用 es6 语法导出/导入失败的 JS 包)所以我认为我来自 typescript 的导入/导出语法.. . 但我希望加载程序(我尝试了 ts-loader et awesome-ts-loader)来翻译它，但在每种情况下，当我尝试导入 bundle 时，它总是返回“未定义”。

这是我的 tsconfig.json 文件:

{
    "compilerOptions": {
        "declaration": true,
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "es6",
        "target": "es6",
        "resolveJsonModule": true,
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules"
    ]
}

(对于模块和目标，我试图为模块和旧的目标更改为 commonjs，但它没有改变任何东西....)

这是 webpack 配置文件:

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    resolve: {
        extensions: ['.ts']
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        library: '',
        libraryTarget: 'commonjs2',
        libraryExport: 'default'
    }
};

和一个非常简单的 src/index.ts

export function foo() {
    console.log('this is foo');
}

但无法导入 foo 函数...我在另一个项目中制作了一个测试文件。我在库项目中使用“npm link”在全局模块中注册包，在测试项目中使用“npm link @kalika-libraries/mixins”将其添加到 node_modules。这是我做的简单测试:

import * as foo from '@kalika-libraries/mixins';

console.log('foo', foo);

但它总是记录“undefined”...

我搜索了几个小时，尝试了不同的 tsconfigs 或 webpack 配置，但它总是一样的......导入工作的唯一情况是在使用 tsc 时......但是查看一些库(如角度)我知道捆绑库是可能的 !我只是不知道该怎么做(也许我没有使用正确的工具...)。

哦，这里是库的 package.json，以防万一:

{
    "name": "@kalika-libraries/mixins",
    "version": "1.0.0",
    "description": "Libraries to apply mixins on classes",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "scripts": {
        "build": "npx webpack"
    },
    "author": "Kalika",
    "license": "MIT",
    "devDependencies": {
        "@types/yeoman-generator": "^3.0.1",
        "codelyzer": "^5.0.0",
        "rxjs-tslint-rules": "^4.21.0",
        "ts-loader": "^5.3.3",
        "tslint-consistent-codestyle": "^1.15.1",
        "tslint-eslint-rules": "^5.4.0",
        "tslint-sonarts": "^1.9.0",
        "typescript": "^3.3.3",
        "vrsource-tslint-rules": "^6.0.0",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0"
    }
}

我在库文件夹中使用“npx webpack”命令来构建它。

因此，如果您有任何想法(希望您不会提出我已经尝试过的解决方案)，我很乐意对其进行测试!

谢谢。

Answer 1

我遇到了同样的问题。这为我解决了这个问题:

在 webpack.config.js 中:

output: {
  ...
  libraryTarget: 'umd',
  library: 'MyPackageName',
  ...
}

在 tsconfig.json 中:

compilerOptons: {
  ...
  "lib": ["es2015", "dom"],
  ...
}