Javascript

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

本文主要是介绍从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.报错修改


这篇关于从0开始学习VUE3--02-使用roolup编译Typescript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!