Как скомпилировать typescript в javascript, затем в 1 файл, используя npm-скрипты

Мой текущий весь файл package.json.

"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"
},

Я пытаюсь иметь один единственный watch script, который будет запускать Lite-сервер, создавать файлы .ts.js и .css.

Прямо сейчас у меня есть systemJS и tsc генерации .js файлов при редактировании или создании любых новых typescript файлов.

Как только эти файлы javascript создаются из tsc:w, они попадают в папку dist. Как только они будут обновлены, я хотел бы угадать и объединить их в 1 файл lifeleveler.app.js, основанный на main.js внутри dist.

Пока я не могу правильно совместить свои задачи.

Каталог моей папки

enter image description here

Я тоже думаю, что мой подход ошибочен, у меня могут быть 2 окна терминала. 1 просмотр TSX → js, а другой для SASS- > CSS.

Затем в конце, когда я готов нажать сборку, возможно, тогда моя задача build:js.

Однако мне нужно будет заменить блоки в моем файле index.html, как бы вы это сделали?

<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

ОТВЕТЫ

Ответ 1

Вы можете изменить свой tsconfig.json:

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

Сначала используйте tsc:w для компиляции в один файл, а build:js - для сокращения до dist/lifeleveler.app.js

Изменить: Обратите внимание, что outFile не может использовать вместе с "module": "commonjs", см. этот вопрос