TypeScript文件的编译执行

目录

一、tsc filename

二、ts-node

三、配置package.json文件自定义npm命令

四、保存后自动编译ts文件

五、自动执行JS文件

六、一个终端一条命令实现自动编译并自动执行

---

一、tsc filename

1、执行编译命令

tsc index.ts

 会生成index.js文件

2、执行index.js即可

二、ts-node

npm地址：ts-node - npm (npmjs.com)

1、安装ts-node插件

npm i -D ts-node

或者全局安装

npm i -g ts-node

2、执行ts文件(不会产生JS文件)

ts-node index.ts

三、配置package.json文件自定义npm命令

package.json文件初始化后scripts选项是这样的

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

 1、编写一个自定义命令

"scripts": {

    "dev":"ts-node index.ts"

  },

2、执行自定义的npm命令dev

npm run dev 

上面的命令等效于下面的命令

ts-node index.ts

四、保存后自动编译ts文件

1、生成TS配置文件tsconfig.json

tsc --init 

2、在根目录下建立src目录用于存放TS文件，建立build目录存放编译后的JS文件

3、配置编译后的JS文件输出到那个目录

（1）在tsconfig.json文件中按住ctrl+f，在搜索框中输入“outDir”

"outDir"初始内容是这样的

// "outDir": "./",

(2)修改输出目录，将输出目录改为build目录

 "outDir": "./build",

4、package.json中自定义自动编译命令

"scripts": {

    "build":"tsc -w"

  },

5、运行自定义npm命令

npm run build

 之后src中的TS文件修改保存后会自动编译TS文件更新build中的JS文件

6、执行JS文件

五、自动执行JS文件

1、安装nodemon

npm地址：nodemon - npm (npmjs.com)

npm i nodemon -g

2、在package.json中增加一条自定义命令------"start":"nodemon ./build.js"

"scripts": {

    "build":"tsc -w",

    "start":"nodemon ./build.js"

  },

3、nodemon配置要忽略的文件变化，如下忽略名为dirname目录下的文件变化，dirname目录下的文件改动时，不会触发执行

"nodemonConfig": {

    "ignore": ["dirname/*"]

  },

4、打开终端运行build命令

npm run build 

 5、不要打断上一条命令，打开一个新的终端运行start命令

npm run start

 这个时候修改TS文件保存后，TS文件会自动编译为JS文件，JS文件会自动执行

六、一个终端一条命令实现自动编译并自动执行

1、安装concurrently

npm地址：concurrently - npm (npmjs.com)

 npm i -g concurrently

2、 修改package.json文件的自定义命令

"scripts": {

    "dev:build":"tsc -w",

    "dev:start":"nodemon ./build/index.js",

    "dev":"concurrently npm:dev:*"

  },

3、执行dev命令

npm run dev 

此时只需要npm run dev一个命令就可以实现自动编译与自动执行了