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

【问题标题】：Exports undefined when trying to bundle a typescript library with webpack尝试将 typescript 库与 webpack 捆绑时导出未定义
【发布时间】：2019-09-10 12:21:06
【问题描述】：

我有一个正在使用 typescript 开发的库。我有通过 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"
    ]
}

（对于模块和目标，我尝试将模块和旧目标更改为 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”命令来构建它。

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

谢谢。

【问题讨论】：

对不起，我的回答有误，我已将其删除。我唯一的猜测是 tsconfig.json 中的 es6 目标存在问题。虽然你会认为会有一个错误而不是 undefined 的导出。

标签： typescript npm webpack

【解决方案1】：

对于第一次使用 webpack 的 ts/js npm 库开发人员来说，在构建过程中默认使用一系列优化来删除许多它确定未使用的代码，这一点并不明显。

创建库时，需要明确告知 wepack，这样它就不会删除您的导出： https://webpack.js.org/guides/author-libraries/

【讨论】：

【解决方案2】：

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

在 webpack.config.js 中：

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

在 tsconfig.json 中：

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

【讨论】：