myJS
  • 说明
  • js核心
  • 函数式编程
    • 链式优化
    • 你真的知道函数吗?
    • 纯函数
    • 函数柯里化
  • 内存的那些事
    • 栈内存和堆内存
    • 垃圾回收机制-GC
    • 闭包恍然大悟
      • 运行时的词法作用域
    • 数据结构基于内存
    • 怎样用chrome devtool 查看内存泄漏状况
    • dom元素的内存泄漏例子讲解
  • 网络请求
    • 原生js请求
    • https了解一下
    • 跨域方法
    • 你不知道的浏览器页面渲染机制
    • 聊点 TCP 干货(1)
  • 异步编程
    • await 和 async
  • 服务器
    • nginx
  • 模块化编程
    • commonJs模块
    • ES模块
    • AMD模块
    • CMD模块
    • module.exports与export那些事儿
  • webpack
    • 环境变量的使用
      • node配置
      • webapck配置
    • postcss处理css
    • webpack-dev-server
    • HMR热更新原理
    • babel配置
      • 转化es6
      • Runtime transform/runtime
    • extract-text-webpack-plugin
    • css加载
    • 打包优化
    • 第三方插件加载中
    • 热更新踩坑
    • typescript+node
    • 代码分割的意思
  • CMD命令行
    • 文件的增删改查
  • node
    • path模块
    • node 文件路径的分析
  • js一些资源库
  • node毛皮
    • cnpm 淘宝镜像
  • 浏览器调试
    • js调试
    • 浏览器同源政策及其规避方法
  • 好好理解变量
    • this指向
    • 作用域
  • 专有名词理解
    • MVC
  • postman
    • 环境变量
  • 树的遍历和操作
    • 二叉树
  • 关于Date你要知道的是?
    • 获取某个月的天数
    • js 日期详解
  • Dom 对象
  • 回调函数
    • 语法。为什么要用
  • class 怎样用好类
    • 用类直接创建对象关联到变量
  • js引擎
  • git操作
    • .gitignore忽略文件
    • 删除操作
  • table学习
    • 表格样式
    • 固定列和行
  • 拖拽
    • 目标容器
    • 狐火的拖拽就是不一样
  • 正则学习
  • 算法
    • 数据结构
  • js小技巧
  • indexDB
  • Matrix 矩阵
Powered by GitBook
On this page

Was this helpful?

  1. webpack

typescript+node

Previous热更新踩坑Next代码分割的意思

Last updated 6 years ago

Was this helpful?

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

  • 首先是环境的搭建

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

在网上找到一遍比较新的关于typescript + node + webpack的项目配置,对着配置了一遍,当然问题是很多,具体的地址:

出现的问题总结:

  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()来引入。

https://www.jianshu.com/p/6aab86403dc1