从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.报错修改