загрузка внешней библиотеки с помощью машинописного приложения - PullRequest
0 голосов
/ 24 февраля 2020

Я пытаюсь использовать Ax ios в моем проекте для машинописного текста и получаю эту ошибку:

Uncaught ReferenceError: require is not defined
    at file.ts:1

Я начал изучать машинопись и подумал сделать несколько вызовов ajax, здесь исходный код:

File.ts:

const axios = require('axios').default;
async function fetchInitData() {
    const resp = await  axios.default.get('http://localhost:8080/issues');
    return resp.data;
}

// const threads = require('worker_threads');
window.onload = async function () {
    let fetchInitData1 = fetchInitData();
    console.log(fetchInitData1);
    document.getElementById('totalbugcount').innerText = await fetchInitData1;

}

пакет. json:

{
  "name": "type1",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "axios": "^0.19.2"
  },
  "devDependencies": {
    "commonjs": "latest",
    "requirejs": "latest"
  }
}

tsconfig. json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "build\\web\\assets\\js"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/scripts/**/*"
  ]
}

и после переноса этот файл генерируется:

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var axios = require('axios').default;
function fetchInitData() {
    return __awaiter(this, void 0, void 0, function () {
        var resp;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, axios.default.get('http://localhost:8080/issues')];
                case 1:
                    resp = _a.sent();
                    return [2 /*return*/, resp.data];
            }
        });
    });
}
// const threads = require('worker_threads');
window.onload = function () {
    return __awaiter(this, void 0, void 0, function () {
        var fetchInitData1, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    fetchInitData1 = fetchInitData();
                    console.log(fetchInitData1);
                    _a = document.getElementById('totalbugcount');
                    return [4 /*yield*/, fetchInitData1];
                case 1:
                    _a.innerText = _b.sent();
                    return [2 /*return*/];
            }
        });
    });
};
//# 
//# sourceMappingURL=file.js.map

Это строка, в которой браузер указывает на ошибку:

Uncaught ReferenceError: require is not defined
    at file.ts:1

1 Ответ

1 голос
/ 24 февраля 2020

Ax ios и Typescript

Ax ios рекомендует запросить пакет для поддержки Typescript следующим образом:

note: Common JS использование

Чтобы получить типизацию TypeScript (для intellisense / autocomplete) при использовании Common JS при импорте с require (), используйте следующий подход:

const axios = require('axios').default;

// axios.<method> will now provide autocomplete and parameter typings

Из документации

TypeScript и Ax * ios кажутся распространенным источником путаницы, но они работают над этим!

Очень часто

Использование 'require' в браузере

Браузеры не поддерживают синтаксис NodeJS 'require'. Если javascript в браузере необходимо использовать require для импорта пакетов, разработчики должны добавить еще один шаг сборки для устранения этих зависимостей. Webpack обычно используется с TypeScript, но browserify и другие сделают свою работу! Ознакомьтесь с этим ответом, в котором более подробно рассматриваются требования и браузер.

...