> For the complete documentation index, see [llms.txt](https://sekin.gitbook.io/myjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sekin.gitbook.io/myjs/webpack/typescript+node.md).

# typescript+node

这两天在整nodejs,该尝试着去搞搞弄得js这个玩意了，书也看了，不过代码敲起来的时候还是问题百出。

* 首先是环境的搭建

node也是采用的js的语法，现在浏览器的提升，也使得node也可以用大部分的es6来写。而且也可以用es7、es8、等来写node然后使用babel来转化成es5。这使得可以用一套语法不用分前端了。当然这样的好好的配置一下webpack来实现了。反正也是尝鲜。干脆直接来使用typescript来写得了，这样一起齐头并进，反正这两个都不熟，都得好好的熟悉APi和多加练习。

在网上找到一遍比较新的关于typescript + node + webpack的项目配置，对着配置了一遍，当然问题是很多，具体的地址：<https://www.jianshu.com/p/6aab86403dc1>

出现的问题总结：

1. 所有的代码都是用typescript来写，包括wepback的配置
2. 生成的后端代码过程以及使用有些不同，通过webpack的ts-loader，把typescript编译成js，然后再打包输出来，应用打包出来 的js。但是这样好像是没有把编译后的文件打包到内存中，需要生成出来，在应用，然后重新启动node,已经代码的热更新。
3. 不再使用webpack-dev-server来启动服务，直接用node启动
4. 后端的代码是整合到wepack里了，但是在这个node的服务里，还是不好写前端的代码，也就是还是不能前后端在一个服务下一起写，达到，改后端的代码就热更新后端的，改前端的代码就热更新前端的，并且刷新浏览器。最好改后端的代码也刷新浏览器，肯定有满足这些情况的 。只是现在我还是不知道怎么样写，对webpack的认识还是处于直接拿来用的形式上。

对于找到的那个配置，有3个地方选哟调整。

1. 对于移除目录dist 命令 rm -rf ./dist  会报错，解决办法是不用这个命令，用 wepack的插件clean-webpack-plugin
2. 对于window ，热更新代码使用 “webpack/hot/signal” 会报错，解决办法是 使用 “webpack/hot/poll?1000”替换
3. 不需要用tsc 把ts代码转换再用babel转换，一是tsc转换的的代码已经可以让浏览器直接用，二是用babel转换的代码根本输不出来。
4. 因为typescript的原因有的包是不能直接通过 import \* as webpack from 'webpack'; 来使用 需要 install  @types/webpack ，但不是所有的包都已经有@types ,但是可以还是用node 的require（）来引入。