[JavaScript知识库]TS创建与自动编写和parcel自动打包

步骤如下

1、初始化项目 npm init -y
2 、安装 typescript

全局安装 npm i typescript -g
本地安装 npm i typescript -D
yarn 安装 yarn global add typescript(全局)

3、生成 tsconfig.json 文件

tsc --init

4、修改 tsconfig.json 中配置文件

"outDir": "./dist" ts 编译后生成的 js 文件所在目录
"rootDir": "./src" 编写 ts 源文件所在目录

5、安装 ts-node

ts-node 是让 node 直接能运行 ts 代码，无需通过 tsc 将 ts 编译成 js 代码。
全局安装：npm i ts-node -g
本地安装：npm i ts-node -D
yarn 安装：yarn global add ts-node

6、安装 nodemon(自动监测运行)

nodemon 作用：可以自动监测到目录中的文件变化并实时更新
全局安装：npm i nodemon -g
本地安装：npm i nodemon -D
yarn 安装：yarn global add -nodemon

7、在 package.json 中配置自动监测

    "scripts": {
        "dev": "nodemon --watch src/ -e ts --exec ts-node ./src/index.ts"
    }

nodemon --watch src/ 表示监测目录是在 package.json 同级目录 src
-e ts 表示 nodemon 命令准备将要监听的是 ts 后缀文件
–exec ts-node ./src/index.ts 表示监测到 src 下面的目录有变化时，都会重新执行 index.ts 文件

parcel 打包支持浏览器运行的 ts 文件

1、安装 parcel 打包工具：npm i parcel-bundler --save-dev
2、在 package.json 中添加启动命令

"scripts": {
    "start": "parcel ./index.html"
}

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读