深入Typescript--01-使用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

巴特西

深入Typescript--01-使用roolup编译Typescript

Typescript是什么？

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

为什么要用Typescript？

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

2.丰富的语法提示

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

三种使用方式

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

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

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

roolup方式详细配置

1.安装依赖

2.初始化TS配置文件

3.rollup配置

4.package.json配置

5.启动服务

6.报错修改

最新文章

热门文章