Проблема с использованием экспорта по умолчанию из библиотеки btoa в скомпилированном коде commonjs - PullRequest
Новая
       26

Проблема с использованием экспорта по умолчанию из библиотеки btoa в скомпилированном коде commonjs

0 голосов
/ 25 января 2019

Я работаю над проектом Typescript, в котором используется библиотека btoa .

Я импортирую его в свой TS так: 

import btoa from 'btoa';

и используйте его соответственно: 

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

Я компилирую свой TS в commonjs в формате ES5, используя tsc, webpack с плагином babel-loader, и когда я пытаюсь использовать мою 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.

Затем я понял, что могу вызвать btoa.default(...) в моем исходном файле TS, и это устраняет ошибку TS, но у меня все еще есть проблема в моем скомпилированном коде commonjs: 

TypeError: btoa.default is not a function

Где я иду не так?

Спасибо

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Итак, я справился с проблемой, используя флаг esModuleInterop в моем файле tsconfig и установив для него значение true.Я наткнулся на эту настройку при поиске в других публикациях и обнаружил, что она повторяет некоторое поведение в Babel, которое я использовал с моей конфигурацией веб-пакета, но я не думаю, что он был настроен правильно в первую очередь.

В любом случае, у меня естьтеперь он вообще не может использовать Babel и просто заставляет компилятор TS компилироваться в commonjs в формате es5, а также генерировать 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.

Надеюсь, это может помочь другим.

0 голосов
/ 25 января 2019

в соответствии с импорт модулей в машинописном тексте , если вы хотите импортировать весь модуль, вы должны использовать: import * as [name] from 'btoa'

...