Search code examples
typescriptpackage.jsonparceljs

How to bundle typescript files to single js file using Parcel Bundler?


I am using a very basic setup to test the Parcel Bundler, but I'm running into errors when trying to bundle all my Typescript files into one JS file.

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "outFile" : "./dist/bundle.js",
        "module": "CommonJS",
        "strictPropertyInitialization": false,
        "moduleResolution": "node",
        "target": "es5",
        "allowJs": true,
    },
    "include": [
        "./src/**/*"
    ]
}

Error: Only 'amd' and 'system' modules are supported alongside --outFile

But when I leave out outFile : "./dist/bundle.js, then all Typescript files get compiled to separate .js files

Changing the module setting to system or amd like the error suggests makes no sense. I don't use SystemJS or AMD, so these will generate errors in the browser:

ReferenceError: Can't find variable: System

TypeError: undefined is not a function (AMD)

How can I tell Parcel to bundle TS files into one JS file?


Solution

  • You are using parcel the wrong way. When using parcel, you should using a single entry(a HTML for browser or a js for node)then run parcel entry, parcel will automatically output what you want.

    From the description in the question, I'm guessing you're using tsc, which you should use alongside parcel. So outFile option is also not needed.