I am working on a website project and utilizing TypeScript for development.
While using the tsc
compiler, I noticed that all my JavaScript code compiles correctly. However, when I include an import
statement in my TypeScript files, it gets compiled into JavaScript as a require
statement which is not compatible with web environments.
I know there is an option like browserify
to resolve this issue, but it brings in additional JavaScript code whenever it encounters a require
statement. I would rather individually include each JavaScript file in my HTML using
<script src="..."></script>
.
Is there a way to stop TypeScript from generating require
statements in the compiled JavaScript output?
Below are the contents of my tsconfig.json
configuration file:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"sourceMap": true,
"outDir": "./typescript/compiled",
"removeComments": true,
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
//"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"./typescript/**/*.ts"
]
}
main.ts
import { Helper } from "./helper";
var helper = new Helper();
helper.ts
export class Helper {
// ...
}
main.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const helper_1 = require("./helper");
var helper = new helper_1.Helper();
//# sourceMappingURL=main.js.map