Node.js + TypeScript + ESM +HotReload ( TypeScript 类型的 Node.js 项目从 CommJS 转为 ESM 的步骤)
当前 Node.js 版本:v16.14.0
当前 TypeScript 版本:^4.6.3
步骤
安装必要的依赖
yarn add -D typescript ts-node @tsconfig/node16 @types/node nodemon
package.json 修改
{
...,
"type": "module",
"scripts": {
"build": "tsc",
"debug": "yarn build && nodemon --inspect src/main.ts",
"go": "node --experimental-specifier-resolution=node dist/main.js"
},
"engines": {
"node": ">=16.14.0"
}
}
tsconfig.json 修改
{
"extends": "@tsconfig/node16/tsconfig.json",
"compilerOptions": {
"baseUrl": ".",
"rootDir": "src",
"outDir": "dist",
"noImplicitAny": true,
"module": "ESNext",
"moduleResolution": "node"
},
"include": ["src/**/*"]
}
nodemon.json 修改
注意,这里配置了环境变量,也就是说这里配置的环境变量优先级高于系统环境变量
{
"restartable": "rs",
"ignore": [".git", "node_modules/**/node_modules"],
"verbose": true,
"execMap": {
"ts": "node --experimental-specifier-resolution=node --loader ts-node/esm"
},
"watch": ["src/", ".env"],
"env": {
"NODE_ENV": "development"
},
"ext": "js,json,ts"
}
参考
- https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
- https://docs.joshuatz.com/cheatsheets/node-and-npm/node-esm
- https://github.com/TypeStrong/ts-node/issues/1007
Node.js + TypeScript + ESM +HotReload ( TypeScript 类型的 Node.js 项目从 CommJS 转为 ESM 的步骤)的更多相关文章
- js之数据类型(对象类型——构造器对象——数组1)
数组是值的有序集合,每个值叫做一个元素,而每一个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的,数组元素可以是任意类型且同一个数组中不同元素也可能有不同的类型.数组的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型
2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件 ...
- TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)
12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...
- [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)
[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts) 问题情景 开发人员使用Visual Studio来开发TypeScript,可以很方 ...
- 【TypeScript】TypeScript 学习 1——基本类型
TypeScript 是 JavaScript 的超集,TypeScript 经过编译之后都会生成 JavaScript 代码.TypeScript 最大的特点就是类型化,因此才叫做 TypeScri ...
- TypeScript完全解读(26课时)_13.TypeScript完全解读-高级类型(2)
13.TypeScript完全解读-高级类型(2) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建文件并在index. ...
- TypeScript 1.7 & TypeScript 1.8
TypeScript 1.7 & TypeScript 1.8 1 1 https://zh.wikipedia.org/wiki/TypeScript TypeScript是一种由微软开发的 ...
- nodejs + typescript + koa + eslint + typescript eslint + prettier + webstorm
ESLint 安装 yarn add -D eslint 生成配置文件 yarn eslint --init cli 选项 How would you like to use ESLint? To c ...
随机推荐
- npm run start 后台运行
yum provides */nohup nohup npm start & 原程序的的标准输出被自动改向到当前目录下的nohup.out文件,起到了log的作用. 停止程序 ps -ef ...
- 二、cadence焊盘与封装制作操作步骤详细说明
一.焊盘制作 1.打开Pad Designer软件,新建文件--设置保存路径和焊盘名称(规范命名) 2.Parameters--设置单位--过孔类型--是否镀金 3.Layers--single la ...
- (十)React Ant Design Pro + .Net5 WebApi:后端环境搭建-IdentityServer4(二)授权模式
一.前言 先交代一下整个Demo项目结构: 一个认证服务(端口5000)IdentityServer4.Authentication 五个授权模式(两个控制台程序,三个MVC项目端口5001)文件夹G ...
- 基于React的仿QQ音乐(移动端)
前言 由于这段时间工作上也是挺忙的,就没有时间去写这个项目,中间一直都是写写停停,进度也是非常慢的.正好前几天都还比较空,就赶紧抓着空闲时间去写这个项目,最后紧赶慢赶地完成了.本项目采用了React的 ...
- canvas 实现 github404动态效果
使用canvas来完成github404的动态效果 前几天使用css样式和js致敬了一下github404的类似界面,同时最近又接触了canvas,本着瞎折腾的想法,便借着之前的js的算法,使用can ...
- ES6-11学习笔记--Map
Map:一种新的数据结构 常用方法 遍历 应用场景 WeakMap 常用方法: let map = new Map() let obj = { name: '张三' } map.set(obj, ...
- Go 里面的 ^ 和 &^
这几天在研究 Go 的源码,突然发现了一个之前没有见过的位运算,见这里 new &^= mutexWoken & 和 ^,分别表示 AND 和 XOR,这个不用多说. 值得一提的是 ^ ...
- C#设计编写一个控制台应用程序
设计编写一个控制台应用程序,练习类的继承. (1) 编写一个抽象类 People,具有"姓名","年龄"字段,"姓名"属性,Work 方法. ...
- mysql绿色版安装以及遇到的问题
下载mysql绿色版 放在如下文件夹 D:\javaSkill\mysql 修改my.ini文件内容: [mysql] default-character-set=utf8 [mysqld] bas ...
- ES6(Promise)等一个函数执行完后再执行另一个函数
function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...