Question

我正在通过WSL在Windows 10上使用TypeScript 3.4.5和Webpack 4.32.2。

我正在尝试创建一个本地工具包，它将基本类聚合到一个索引文件中，然后在其中导出它们。无论我如何在其他项目中进行导出或导入，导入的类始终为“未定义”或空对象“ {}”。

我都试图通过npm将此'api-tools'软件包链接到另一个本地项目，并且我还尝试通过package.json的文件依赖方法（即：{“ api-tools”：“ file :.”）进行安装。 ./api-tools“}，并且在两种情况下结果都是相同的。

这是api-tools软件包的索引文件：

index.ts：

import RestAPI from './lib/RestAPI';
export { RestAPI };

这是RestAPI库：

lib / RestAPI.ts：

export default class RestAPI {
    handle(req, res) {}
}

在使用中的项目中，我这样导入它：

import { RestAPI } from 'api-tools';
console.log(RestAPI);

但是将该对象登录到控制台显示该对象未定义。

我尝试了不同的导出和导入语法，即：

// RestAPI.ts:
export class RestAPI { 
    handle() {}
}

// index.ts:
import { RestAPI } from './lib/RestAPI';
console.log(RestAPI);

exports = { 
    RestAPI: RestAPI
}
// also tried module.exports = {...}

在此放置console.log表示已正确定义了导出的RestAPI及其所有属性。从这里，我尝试以不同的方式在消费项目中使用它：

// both give empty object {}
import * as RestAPI from 'api-tools';
import RestAPI from 'api-tools';

// gives undefined
import { RestAPI } from 'api-tools';

console.log(RestAPI);

这些总是给一个空对象，否则它是不确定的。

这可能只是TypeScript /类型的事情吗？对于编译的index.js和api-tools package.json定义的index.d.ts类型文件，一切都构建良好，项目的路径看起来也很好。

package.json：

{
  "main": "build/index.js",
  "types": "build/src/index.d.ts",
}

tsconfig.json：

{
    "compilerOptions": {
        "declaration": true,
        "incremental": true,
        "baseUrl": "./",
        "outDir": "build",
        "module": "es6",            // specifiy module code generation
        "moduleResolution": "node",
        "target": "es6",         // specify ECMAScript target version
        "strict": true,
        "resolveJsonModule": true
    },
    "types": [ "webpack-env", "node" ]
}

通过WSL这样做可能会出现问题吗？甚至是Webpack？

我还尝试将软件包发布到npm，并通过npm install的正常过程将其导入，但是发生了同样的事情，这使我认为这可能与我的配置或对模块的了解有关。

感谢您的帮助，试图解决这个问题的时间太长了：-]。

Answer 1

在index.ts中，尝试：

export { default as RestAPI } from './lib/RestAPI';

Answer 2

弄清楚了。 Webpack默认不处理导出，必须在输出配置中设置它：

output: {
    library: 'api-tools',
    libraryTarget: 'umd'
},

Answer 3

我在尝试通过 npm link 使用 npm 包作为库时遇到了一些问题。在我的案例中，罪魁祸首是对两个项目的重复依赖 - Project 和 Lib 正在导入相同的模块。 Webpack 在这里静默失败。

通过在 Lib 中将 "externals" 添加到我的 webpack 配置中以告诉这些包将存在于项目中来修复它

externals: {
    "pixi.js": "pixi.js",
    immer: "immer",
    redux: "redux",
    lodash: "lodash",
    gsap: "gsap",
  },

在TypeScript中，始终未定义或{}导出自定义ES6模块并导入到另一个本地项目中

3 个答案: