Question

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

这是我的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);

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

我搜索了几个小时，尝试了不同的tsconfig或webpack config，但始终相同...导入的唯一情况是使用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"],
  ...
}

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

1 个答案: