尝试将打字稿库与 webpack 捆绑在一起时导出未定义

Question

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

这是我的 tsconfig.json 文件：

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

（对于模块和目标，我尝试将模块和较旧的 targs 更改为 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);

但它总是记录“未定义”......

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

哦，这里是库的 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"],
  ...
}