web-dev-qa-db-fra.com

Comment compiler TypeScript en utilisant la commande npm?

Eh bien, je voulais juste savoir s'il existe une commande qui compilera directement le code TypeScript et obtiendra la sortie. En ce moment, ce que je fais, c'est que chaque fois que je modifie le fichier, je dois réexécuter la commande pour le compiler

npm start

Cela démarre le navigateur, puis je dois arrêter l'exécution en utilisant ctrl + c, puis je dois exécuter le fichier en utilisant la commande npm

node filename

pour voir la sortie.

Donc, ce que je veux savoir, est-ce qu'il y a une commande npm qui compilera le fichier .ts et verra les modifications que j'ai apportées au fichier pendant que je l'exécute en utilisant le

node filename

commander

node.jstypescriptnpm
10
Lijin Durairaj

Vous pouvez lancer la commande tsc (compilateur TypeScript) avec --watch argument.

Voici une idée:

  • Configurer TypeScript à l'aide de tsconfig.json fichier
  • Courir tsc --watch, donc à chaque fois que vous modifiez un .ts fichier, tsc le compilera et produira la sortie (disons que vous avez configuré TypeScript pour mettre la sortie dans ./dist dossier)
  • Utilisez nodemon pour voir si les fichiers dans ./dist ont changé et si nécessaire pour relancer le serveur.

Voici quelques scripts (à mettre dans package.json) qui peut vous aider à le faire (vous devrez installer les modules suivants npm install --save TypeScript nodemon npm-run-all rimraf)

"scripts": {
    "clean": "rimraf dist",
    "start": "npm-run-all clean --parallel watch:build watch:server --print-label",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'"
}

Il vous suffit ensuite d'exécuter npm start dans un terminal

24
ThomasThiebaud

Ceci est basé sur la solution proposée par @ThomasThiebaud. J'ai dû le modifier un peu pour m'assurer que les fichiers sont intégrés dans dist/ avant que nodemon essaie de démarrer le serveur.

"scripts": {
    "clean": "rimraf dist",
    "build": "tsc",
    "watch:build": "tsc --watch",
    "watch:server": "nodemon './dist/index.js' --watch './dist'",
    "start": "npm-run-all clean build --parallel watch:build watch:server --print-label"
  },

Vous devez toujours exécuter npm start pour démarrer le tout.

7
demisx

Voici mon approche, disons que vous gardez tous vos fichiers TypeScript dans le dossier src et que vous voulez que les fichiers javascript sortis soient générés dans le dossier ./dist.

{
    "name": "yourProjectName",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/index",
    "types": "./dist/index",
    "scripts": {
        "dev": "tsc --watch & nodemon dist"
    },
    "author": "Gh111",
    "license": "ISC",
    "devDependencies": {
        "yourdevDependencies": "^1.0.0"
    }
}

et fichier de configuration TypeScript tsconfig.json

{
  "compilerOptions": {
    "target": "es5",       
    "module": "commonjs",  
    "outDir": "./dist",    
  },
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules"
  ]
}

D'accord, qu'est-ce qui se passe ici

Tout d'abord, nous devons créer tsconfig.json Et dire à TypeScript de placer les fichiers compilés dans le dossier ./dist Et en même temps nous devons exclure le dossier node_module Ou tout ce que nous voulons et tout inclure du répertoire ["./src/**/*"].

Après cela, dans le fichier packages.json, Nous devons spécifier le chemin vers notre fichier compilé index.js

"main": "./dist/index"

et enfin nous disons à tsc à --watch tout TypeScript changements, et nodemon à regarder à l'intérieur du répertoire ./dist et si quelque chose change nodemon redémarrera le serveur.

"scripts": {
    "dev": "tsc --watch & nodemon dist"
 },

Pour exécuter le script, tapez npm run dev

2
Gh111