如何使用 npm 脚本将 typescript 编译成 javascript，然后编译成 1 个文件

Posted 2023-03-07

技术标签:

【中文标题】如何使用 npm 脚本将 typescript 编译成 javascript，然后编译成 1 个文件【英文标题】：How to compile typescript into javascript then into 1 file using npm scripts 【发布时间】：2017-06-30 02:06:10 【问题描述】：

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 文件。

现在，当我编辑或制作任何新的打字稿文件时，我有 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 文件中的块，你会怎么做？

<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

【问题讨论】：

你不能用npmjs.com/package/gulp-uglify之类的东西吗？ 【参考方案1】：

你可以修改你的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一起使用

【讨论】：

谢谢，但是嗯，我试过了，得到了这个错误：error TS6082: Only 'amd' and 'system' modules are supported alongside --outFile. 我在我的问题中发布了我的 tsconfig.json 文件。你需要删除 "module": "commonjs" 嗯仍然出现错误，npm run twc:w 有效，但是当我运行 npm start 时，我得到了这个：node_modules/@angular/common/src/pipes/async_pipe.d.ts(44,38): error TS2304: Cannot find name 'Promise 介意在这里查看我的完整回购吗？ github.com/leongaban/lifeleveler.io 啊，谢谢！想通了，我需要适当地编辑我的索引文件，我的一个模块也坏了。好的，下一步是找出 npm 脚本来更改我的生产索引文件:) 非常感谢！【参考方案2】：

看看这个解决方案：https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS

重要文件：包.json tsconfig.json 网页包文件应用模块结构

希望有帮助！

【讨论】：

谢谢！但我只想使用 NPM 脚本的原因是为了消除对像 webpack 这样的构建器的需求。我现在唯一不知道该怎么做的就是将所有内容编译成 1 个文件。在 TS 手表从 .ts 构建 JS 之后

以上是关于如何使用 npm 脚本将 typescript 编译成 javascript，然后编译成 1 个文件的主要内容，如果未能解决你的问题，请参考以下文章

TypeScript的使用

如何将文本作为 npm 脚本命令添加到文件中

如何让 npm 从 GitHub url 安装 typescript 依赖项？

vscode下搭建typescript时提示"无法将“npm”项识别为 cmdlet函数脚本文件或可运行程序的名称"错误的解决方法

如何在 Electron 中使用 Typescript 脚本？

upload-tools发布一个 TypeScript 编写的 npm 包 (自动执行yarn build 然后上传至服务器指定目录)