从0开始学习VUE3--02-使用roolup编译Typescript

Typescript是什么？

TypeScript是Javascript的超集，遵循最新的ES5/ES6规范。Typescript扩展了Javascript语法。

为什么要用Typescript？

1.Typescript更像后端，语言严谨，适合开发大型企业应用

2.丰富的语法提示

3.编写代码时进行类型检查提前避免错误

三种使用方式

1.全局安装typescript对TS进行编译

npm install typescript -g tsc --init # 户帮我们生成tsconfig.json tsc # 可以将ts文件编译成js文件，会在当前目录下生成js文件，不写文件名字的话，就全都编译了 tsc --watch # 监控ts文件变化生成js文件 

2.快速直接看结果，也可以使用 code runner + npm install ts-node

3.用的多的方式：webpack roolup 等构建工具来处理ts

• 解析ts方式有两种，ts插件，或者babel
• rollup 一般用 roolup-plgin-typescript2
• webpack 一般用 ts-loader 或者 babel-plugin-typescript

roolup方式详细配置

1.安装依赖

npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D 

2.初始化TS配置文件

npx tsc --init 

3.rollup配置

// rollup.config.js import ts from 'rollup-plugin-typescript2' import {nodeResolve} from '@rollup/plugin-node-resolve'; import serve from 'rollup-plugin-serve'; import path from 'path' export default {     input:'src/index.ts',     output:{         format:'iife',         file:path.resolve('dist/bundle.js'),          sourcemap:true     },     plugins:[          nodeResolve({             extensions:['.js','.ts']         }),         ts({             tsconfig:path.resolve(__dirname,'tsconfig.json')         }),         serve({             open:true,             openPage:'/public/index.html',             port:3000,             contentBase:''         })     ] } 

4.package.json配置

scripts: {       dev: rollup -c -w } 

5.启动服务

npm run dev 

6.报错修改