How to compile typescript into javascript then into 1 file using npm scripts

Question

My current entire package.json file.

"scripts": {
    "build": "webpack",
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "build:css": "node-sass --output-style compressed --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
    "build:css-expand": "node-sass --include-path scss scss/lifeleveler.scss app/assets/css/app.css",
    "watch:css": "nodemon -e scss -x \"npm run build:css\"",
    "watch:css:expand": "nodemon -e scss -x \"npm run build:css-expand\"",
    "build:js": "browserify dist/main.js > dist/lifeleveler.app.js",
    "watch": "npm run watch:css & npm run watch:js",
    "watch:js": "onchange '/dist/**/*.js' -p -- npm run build:js"
},

I'm trying to have 1 single watch script that will run the lite server, build the .ts .js and .css files.

Right now I have systemJS and tsc generating .js files when I edit or make any new typescript files.

Once those javascript files are generated from the tsc:w, they end up in the dist folder. Once they are updated there I would like to uglify and concat them into 1 lifeleveler.app.js file based off the main.js inside of dist.

So far I can't combine my tasks above correctly..

My folder directory

I'm also thinking my approach is wrong, I can have 2 terminal windows. 1 watching TSX -> js, and the other for SASS->CSS.

Then at the end, when I'm ready to push a build, perhaps then my build:js task.

However I would need to replace blocks in my index.html file, how would you do that?

<html>
<head>
    <meta charset="UTF-8">
    <title>LifeLeveler</title>
    <meta name="description" content="Level up in the journey of life.">
    <link rel="stylesheet" href="app/assets/css/app.css">
    <!-- load the dependecies -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <!-- load our angular app with systemjs -->
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) { console.log(err); });
    </script>
    <!-- <script src="dist/lifeleveler.app.js"></script> -->
</head>
<body class="container">

    <my-app></my-app>

</body>
</html>

tsconfig

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir": "app/",
    "outFile": "./dist/main.js",
    "outDir": "dist"
},
"sourceMap": true

Can't you use something like npmjs.com/package/gulp-uglify ? — Rajind Ruparathna
– Rajind Ruparathna, Commented Feb 17, 2017 at 12:30

Community · Accepted Answer · 2017-05-23 12:25:08Z

5

+100

You can modify your tsconfig.json :

{
    "compilerOptions": {
        "target": "ES5",
        "rootDir": "app/",
        "outFile": "./dist/main.js"
    }
}

First use tsc:w to compile into a single file, and build:js to minify to dist/lifeleveler.app.js

Edit : Please note outFile can not use along with "module": "commonjs", see this question

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Feb 21, 2017 at 4:20

Sing

4,0623 gold badges32 silver badges42 bronze badges

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

4 Comments

Leon Gaban Over a year ago

Thanks, but hmm I tried that and getting this error: error TS6082: Only 'amd' and 'system' modules are supported alongside --outFile. I posted my tsconfig.json file in my question.

Sing Over a year ago

you need to remove "module": "commonjs"

Leon Gaban Over a year ago

Hmm still getting an error, the npm run twc:w works, but when I run npm start I get this: node_modules/@angular/common/src/pipes/async_pipe.d.ts(44,38): error TS2304: Cannot find name 'Promise mind checking out my full repo here? github.com/leongaban/lifeleveler.io

Leon Gaban Over a year ago

Ah thanks! Figured it out, I needed to edit my index file appropriately, also one of my modules was broken. Ok next step is figuring out npm scripts to change my index file for production :) thanks so much!

José Quinto Zamora · Accepted Answer · 2017-02-21 00:58:17Z

0

Take a look to this solution: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS

Important files: package.json tsconfig.json webpack files app modules structure

Hope that helps!

answered Feb 21, 2017 at 0:58

José Quinto Zamora

2,13815 silver badges15 bronze badges

1 Comment

Leon Gaban Over a year ago

Thanks! But the reason I wanted to use only NPM scripts, was to remove the need for a builder like webpack. The only thing I can't figure out how to do right now is compile everything into 1 file. After the TS watch builds the JS from the .ts

Collectives™ on Stack Overflow

How to compile typescript into javascript then into 1 file using npm scripts

tsconfig

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

tsconfig

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related