javascript - 使用 Typescript 前端应用程序加载外部库

Question

我尝试在我的前端 typescript 项目中使用 Axios，但收到此错误:

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

我开始学习 typescript 并想做一些ajax调用，这里是源代码:

文件.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;

}

package.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

Answer 1

Axios 和 Typescript

Axios 建议通过以下方式获取包以支持 Typescript:

note: CommonJS usage

In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require() use the following approach:

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

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

From the documentation

TypeScript and Axios seem to be a common source of confusion, but they're working on it!

Very common

在浏览器中使用“require”

浏览器不支持 NodeJS 'require' 语法。如果浏览器中的 javascript 需要使用 require 导入包，开发人员必须添加另一个构建步骤来解决这些依赖关系。 Webpack 通常与 TypeScript 一起使用，但 browserify 和其他人可以完成这项工作! Check out this answer that goes into more detail about require and the browser.