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"
},
我正在尝试使用 1 个单独的 watch 脚本来运行 lite 服务器、构建 .ts .js 和 .css 文件。
现在，当我编辑或制作任何新的 typescript 文件时，我有 systemJS 和 tsc 生成 .js 文件。
从 tsc:w 生成这些 javascript 文件后，它们最终会在 dist 文件夹中。一旦它们在那里更新，我想根据 dist 内部的 main.js 将它们 uglify 并连接到 1 个 lifeleveler.app.js 文件中。
到目前为止，我无法正确组合上面的任务..
我的文件夹目录
我也认为我的方法是错误的，我可以有 2 个终端窗口。 1 看 TSX -> js，另一个看 SASS-> CSS。
最后，当我准备好推送构建时，也许是我的 build:js 任务。
但是我需要替换 index.html 文件中的 block ，你会怎么做？
<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>
"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
最佳答案
你可以修改你的 tsconfig.json :
{
"compilerOptions": {
"target": "ES5",
"rootDir": "app/",
"outFile": "./dist/main.js"
}
}
先用tsc:w编译成单个文件，用build:js压缩成dist/lifeleveler.app.js
编辑:请注意outFile不能和"module": "commonjs"一起使用，see this question
关于javascript - 如何使用 npm 脚本将 typescript 编译成 javascript，然后编译成 1 个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42181169/