Saya memiliki file .ts di proyek saya yang menggunakan impor. Impor ini, tentu saja, tidak berfungsi di browser, jadi saya ingin mengkompilasi file TypeScript saya untuk didukung di browser

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

Hanya untuk pengujian, saya menambahkan test.ts. Isinya adalah

import Axios from "axios";

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

Nah, ketika saya menjalankan proses build, inilah hasilnya

"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");

Dan ketika saya menggunakan ini di index.html saya

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

Itu hanya mengatakan ReferenceError: exports is not defined


Saya tidak dapat membayangkan bahwa sangat sulit dan sulit untuk mengkompilasi TypeScript menggunakan impor ke JavaScript yang kompatibel dengan browser. Bantuan apa pun akan sangat dihargai.

2
Musterknabe 3 Juli 2020, 08:32

1 menjawab

Jawaban Terbaik

Ini berfungsi, ketika saya menggunakan webpack dan webpack.config.js yang terlihat seperti ini

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'),
    },
};

Namun, apakah saya benar-benar membutuhkan webpack untuk ini? Saya tidak menentang webpack dan rencananya akan menggunakannya nanti, tapi tetap saja, apakah tidak ada cara lain?

0
Musterknabe 3 Juli 2020, 08:05