javascript - Kompiler TypeScript-fil med imports for nettleser

Jeg har en .ts-fil i prosjektet mitt som bruker imports. Disse importene fungerer selvfølgelig ikke i nettlesere, så jeg vil kompilere TypeScript-filene mine slik at de støttes i nettlesere

{
  "compilerOptions": {
    "noImplicitAny": true,
    "lib": ["es2017", "es7", "es6", "dom"],
    "module": "CommonJS",
    "target": "es5"
  },
  "files": [
    "test.ts"
  ]
}

Bare for testing la jeg til test.ts. Innholdet er

import Axios from "axios";

var axios = Axios.create();
axios.get("https://www.example.com");

Nå, når jeg kjører byggeprosessen, er dette resultatet

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var axios_1 = require("axios");
var axios = axios_1.default.create();
axios.get("https://www.example.com");

Og når jeg bruker dette i min index.html

<script src="test.js"></script>

Det står ganske enkelt ReferenceError: exports er ikke definert

Jeg kan ikke forestille meg at det kan være så vanskelig og utfordrende å kompilere TypeScript ved bruk av imports til nettleser-kompatibel JavaScript. All hjelp vil bli svært verdsatt.

Svar #1

Det fungerer når jeg bruker webpack og en webpack.config.js som ser slik ut

const path = require('path');

module.exports = {
    entry: './test.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Men trenger jeg virkelig webpack for dette? Jeg er ikke imot webpack, og planen var uansett å bruke det senere, men likevel, finnes det ingen annen måte?

Relaterte artikler