Question

我正在研究一个利用btoa库的Typescript项目。

我将其导入到TS中，如下所示：

import btoa from 'btoa';

并相应地使用它：

xhr.defaults.headers.common.Authorization = `Basic ${btoa(unescape(encodeURIComponent(`${user}:${pass}`)))}`;

我正在使用tsc，带有babel-loader插件的webpack将TS压缩为ES5格式的commonjs，当我尝试在节点环境中使用我的lib时，在尝试使用btoa函数时出现错误被调用：

TypeError: btoa_1.default is not a function

btoa软件包确实包含一个类型文件，该文件在其中导出默认功能：

export default function(str: string): string;

我只能猜测导入方式可能是错误的吗？

如果相关，我的tsconfig如下：

{
  "compilerOptions": {
    "baseUrl": "",
    "outDir": "./dist/commonjs",
    "module": "commonjs",
    "target": "es5",
    "declaration": true,
    "moduleResolution": "node",
    "declarationDir": "./dist/typings/",
    "lib": [
      "es6",
      "es2015",
      "dom"
    ],

  },
  "files": [
    "./src/index.ts"
  ]
}

我该怎么做才能使btoa软件包在已编译的commonjs代码中正确使用？

谢谢

更新

我尝试使用以下语法：

import * as btoa from 'btoa';

在TS抱怨之后，我尝试使用它，说：

Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("/Users/rparker-admin/Documents/Github/nepal/api-client/node_modules/@types/btoa/index")' has no compatible call signatures.

然后我意识到我可以在TS源文件中调用btoa.default(...)，并且可以解决TS错误，但是在我编译的commonjs代码中仍然有问题：

TypeError: btoa.default is not a function

我要去哪里错了？

谢谢

Answer 1

如果要导入整个模块，请按照import mosdules in typescript使用：import * as [name] from 'btoa'

Answer 2

因此，我在tsconfig中使用esModuleInterop标志并将其设置为true，从而解决了我的问题。我在搜索其他帖子时遇到了此设置，发现它复制了我在Webpack配置中使用的Babel中的某些行为，但我认为我一开始就没有正确配置它。

无论如何，我现在完全不能使用Babel了，只是让TS编译器以es5格式编译为commonjs，还可以使用webpack生成UMD构建。

tsconfig

{
  "compilerOptions": {
    "baseUrl": "",
    "outDir": "./dist/commonjs",
    "module": "commonjs",
    "target": "es5",
    "declaration": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "declarationDir": "./dist/typings/",
    "lib": [
      "es6",
      "es2015",
      "dom"
    ],

  },
  "files": [
    "./src/index.ts"
  ]
}

webpack.config.js

const path = require('path');

module.exports = (env) => {

  return {
    entry: {
      'index': path.resolve(__dirname, './dist/commonjs/index.js')
    },
    output: {
      path: path.resolve(__dirname, './dist/umd'),
      filename: '[name].js',
      library: 'subscriptionsClient',
      libraryTarget: 'umd', // supports commonjs, amd and web browsers
      globalObject: 'this'
    }
  };

};

在我的package.json中，设置以下条目：

"main": "./dist/umd/index.js",
"module": "./dist/commonjs/index.js",
"types": "./dist/typings/index.d.ts",

我现在可以在Angular（webpack）和node中使用构建的库源。

希望这可以帮助其他人。

在已编译的commonjs代码中使用从btoa库中默认导出的问题

2 个答案: