Remove require statement from JavaScript files made in TypeScript

Question

I'm developing a website and I am using TypeScript.

I use the tsc compiler and all my JavaScript compiles correctly, but if I use an import statement in my TypeScript, then it compiles into the JavaScript files as a require statement which is not usable in the web.

I am aware I can use something like browserify to fix this issue, but that includes the code of other JavaScript files when it see's a require statement. I'd prefer to just include each JavaScript file in my HTML with <script src="..."></script>.

How can I prevent TypeScript from generating require statements in the compiled JavaScript code?

Here are the contents of my tsconfig.json 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

I think your target should be ES5. Can you try this, if that can solve your issue? — Vinod Bhavnani
– Vinod Bhavnani, Commented Nov 30, 2017 at 7:44
@VinodBhavnani I just tried, the require statement remains. — Ari Seyhun
– Ari Seyhun, Commented Nov 30, 2017 at 7:45
@Crappy that removed the require statement, but replaced it with a regular TypeScript import { } from "./helper" statement which wouldn't work on a website. — Ari Seyhun
– Ari Seyhun, Commented Nov 30, 2017 at 7:52

Khiem Tran · Accepted Answer · 2017-11-30 08:06:19Z

2

If you are not using modules in your javascript application. You don't even use import in your typescript file. Because using import mean you imports that file into your code.

If you want to have javascript file separately, use

/// <reference path=".. definition you want to refer ..." />

instead.

UPDATED

Since TypeScript 1.5 if you have your files in

"include": [
        "./typescript/**/*.ts"
    ]

You don't have to do reference ... any more.

edited Nov 30, 2017 at 8:06

answered Nov 30, 2017 at 7:53

Khiem Tran

6,16916 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Khiem Tran Over a year ago

Updated answer, tested.

Collectives™ on Stack Overflow

Remove require statement from JavaScript files made in TypeScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related