TS打包

因为TS代码,是不能直接在浏览器和node环境下运行的,所以我们要先编译成js代码
一般情况下,我们会在package.json里配置scripts命令来对TS代码进行打包
image.png
如果单纯的只配置scripts命令,那么打包出来的js文件,是存放在src目录的,但是 一般情况下,我们都要求打包文件是单独存放一个文件夹的,比如build文件夹。这个时候就需要配置tsconfig.json文件了。
image.png
如果我们每次修改了ts文件,然后再去运行 npm run build命令打包,会稍显麻烦。理想状态是当我们修改了ts文件,TS检测到文件的变化,自动帮我们打包生成新的js文件。该怎么配置呢?
  • 在tsc命令后 加一个 -d,代表着当我们运行了 tsc命令后,就一直监控着ts文件的变化,一有变化就打包。


    image.png
在编译完成以后,如果我们还想再自动的去运行编译好的文件,该怎么办呢? 这个时候,我们可以安装一个node的工具 nodemon,npm install nodemon -D,它会检测整个项目下文件的变化,然后帮我们做一些事情。
  • 我们重新配置一个命令start,当我们运行 npm run start的时候,nodemon就会监控整个项目文件的变化,当文件发生变化的时候,就会去执行 当前目录下的build文件夹下的crawler.js文件。


    image.png
这个时候,当运行npm run start命令的时候,会发现,命令行会重复执行这个命令。主要是因为data目录下的生成的文件被检测到变化了,导致了循环执行。为了避免这个情况发生,需要再对nodemon做一些配置,这样配置后,就只检测build里的js文件了。
image.png
至此,我们就实现了,让我们修改TS源码的时候,会重新编译。重新编译后,build文件夹下的js文件发生了变化,然后执行这个变化过的js文件,执行过之后,data下生成的文件就会更新这样一个流程。这个流程只是开发环境下做的事情。
  • 刚才我们是要同时运行两个命令 tsc -w,nodemon node ./build/crawler.js。我们也可以安装个工具,只运行一次。npm install concurrently -D
  • 创建script命令


    image.png
  • 该命令也可以缩写


    image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容