前端nodejs + typescript + express
<p><span style="font-size: 18px"><strong>注:ts能写出非常严谨的代码，并且转换js会更加好</strong></span></p><p><span style="font-size: 18px"><strong>一、搭建环境</strong></span></p>
<p><span style="font-size: 18px"><strong>1、新建文件夹，初始化npm init --yes出现package.json</strong></span></p>
<p><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009135525531-2072486931.png"></p>
<p><strong><span style="font-size: 18px">2、cnpm i typescript -g 全局安装typrscript</span></strong></p>
<p><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009135516215-529078911.png"></p>
<p><strong><span style="font-size: 18px">3、tsc --init 生成ts的配置文件tsconfig.json（通过这个文件可以对ts进行转换）</span></strong></p>
<p> <img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009135924139-2116832799.png"></p>
<p><strong><span style="font-size: 18px">4、npm install express 构建本地服务，使用express</span></strong></p>
<p> <img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009140233909-1216311336.png"></p>
<p><strong><span style="font-size: 18px">生成dependencies，对应生产</span></strong></p>
<p><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009140728826-1079055619.png"></p>
<p> <strong><span style="font-size: 18px">5、npm i @types/node -g 安装@types/node模块（@types/node模块会帮助我们引入typescript需要的内容）</span></strong></p>
<p><strong><span style="font-size: 18px"><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009140537173-194721873.png"></span></strong></p>
<p> <strong><span style="font-size: 18px">6、npm i @types/express -D 安装本地开发ts对应的express( -D代表的是当前项目中安装，-g是全局的)</span></strong></p>
<p><strong><span style="font-size: 18px"><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009140848834-2131290467.png"></span></strong></p>
<p><span style="font-size: 18px"> <strong><strong>生成devDependencies，对应开发</strong></strong></span></p>
<p><strong><span style="font-size: 18px"><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009140908997-60141315.png"></span></strong></p>
<p><strong><span style="font-size: 18px">二、修改tsconfig.json配置文件，使用es6已经tsc后文件输出到build文件夹下</span></strong></p>
<p><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009142420956-347225313.png"></p>
<p> </p>
<p><strong><span style="font-size: 18px"> <img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009143423981-503266139.png"></span></strong></p>
<p><strong><span style="font-size: 18px">三、修改package.json，启动命令 npm run start-nodemon 执行两个命令，tsc先转换ts为js，在启动build/server.js</span></strong></p>
<p><strong><span style="font-size: 18px"><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009145108237-45162976.png"></span></strong></p>
<p> <img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009145151301-663708217.png"></p>
<p><strong><span style="font-size: 18px">四、以上代码可以实现npm run start-nodemon</span></strong><strong><span style="font-size: 18px">启动代码，但是每次修改都需要重启比较麻烦，我们来安装nodemon插件</span></strong></p>
<p><strong><span style="font-size: 18px">npm i nodemon -g</span></strong></p>
<p><strong><span style="font-size: 18px"><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009144319971-1643357080.png"></span></strong></p>
<p> </p>
<p><strong><span style="font-size: 18px"> 安装完成我们来修改package.json文件，新增运行脚本</span></strong></p>
<div><strong><span style="font-size: 18px">"dev":"nodemon -e ts -w ./ -x npm run start-nodemon"</span></strong></div>
<div><strong><span style="font-size: 18px">注：-e代表后缀为ts的，-w监听 ，npm run <strong>start-nodemon运行</strong>上面配置的脚本</span></strong></div>
<div> </div>
<p> <img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009145415693-131116500.png"></p>
<p> </p>
<p> 此时我们修改ts文件将会监听自动重启</p>
<p><img src="https://img2020.cnblogs.com/blog/1407420/202010/1407420-20201009145507701-880039429.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/deng-jie/p/13785679.html
頁:
[1]