Typescript
在本文中不讨论Typescript的具体用法，我们将学习如何将Typescript代码转为JavaScript。
如何将一个Typescript代码转义为JavaScript呢？Typescript本身提供了一个工具typescript，因此我们针对其来学习一番。
如何使用typescript呢？ 可以到官网TypeScript使用说明文档。
我们这里简单总结一下，在项目中使用Typescript，构建工具一般有以下几个步骤：
npm install typescript -D安装Typescript工具npm install @babel/core -D结合babel对Typescript进行转义- 配置文件
tsconfig.json，配置一些Typescript编译功能 npm install eslint -D，结合eslint对代码语法做检测- 配置文件
eslint.json，配置代码检测标准
tsconfig.json
tsconfig.json一般是放到项目根目录，如果放到其他目录，需要修改对应地址， 配置文件主要几个部分：
compilerOptions编译时的一些配置内容watchOptions当监听文件变化时候需要配置一些内容include哪些文件需要编译，如："include": ["src/**/*", "tests/**/*"]exclude对某些文件进行忽略，不做编译，如："exclude": ["src/js/*"]extends继承其他配置文件，如："extends": ["./base.json"]
目前我们主要使用的还是compilerOptions，里面主要的配置项有：
paths将部分路径进行缩写，比如："@App/*": ["src/*"]，后续使用@App，就会解析成srctarget代码转义哪个ES标准下，如：ES2017,ES2018,ES2019等module代码模块化遵循哪个标准，如：ESNext，CommonJS等strict是否使用严格模式检测代码质量lib编译的有时候需要依赖一些全局变量，比如：Document对象，这个时候需要设置为DOM，或者使用Map对象，这个时候需要ESNextdeclaration是否给每个文件都生成 声明文件.d.tsnoImplicitOverride设置后可以提醒继承类override同名方法时候，需要标注override关键字noUnusedLocals不允许有未使用的变量esModuleInterop可以修复由于ES规范和其他规范混合使用导致的引用错误useUnknownInCatchVariables支持catch中error设置为Unknown类型resolveJsonModule支持json文件引入为一个模块
对Rollup和Typescript都有一定了解后，接下来我们就来实战Rollup+Typescript工程化项目。
实战
1.初始化项目 新建一个文件夹demo-rollup，后续命令如下：
mkdir demo-rollup npm init
2.安装依赖
- 安装rollup相关依赖
pnpm add rollup -D
- 安装Typescript相关依赖
pnpm add typescript tslib -D
- 安装babel
pnpm add @babel/core @babel/preset-env @babel/plugin-proposal-class-properties -D
- 安装rollup相关插件
pnpm add @rollup/plugin-babel -D #babel插件 pnpm add @rollup/plugin-commonjs -D #转成commonjs的插件 pnpm add rollup-plugin-typescript2 -D #typescript插件
- 安装其他依赖
pnpm add rimraf -D
3.配置rollup.config.js
import typescript from 'rollup-plugin-typescript2'; // 处理typescript import babel from '@rollup/plugin-babel'; export default [ { input: 'src/index.ts', plugins: [ typescript(), // typescript 转义 babel({ babelrc: false, presets: [['@babel/preset-env', { modules: false, loose: true }]], plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]], exclude: 'node_modules/**', }) ], output: [ { file: 'dist/index.js', format: 'cjs' }, { file: 'dist/index.esm.js', format: 'es' } ] } ];
4.配置tsconfig.json
{ "include": ["./src/*"], "compilerOptions": { "target": "ES2019", "module": "ESNext", "moduleResolution": "node", "strict": true, "esModuleInterop": true, "noImplicitOverride": true, "noUnusedLocals": true, "resolveJsonModule": true, "useUnknownInCatchVariables": false, "typeRoots": ["./types", "./node_modules/@types"] }, "types": ["jest"] }
5.配置package.json
添加dev和build命令脚本，如下所示：
{ ... "main": "dist/index.js", "type": "module", // rollup新增的配置项 "scripts": { "dev": "rimraf dist && rollup -c rollup.config.ts -w", "build": "rimraf dist && rollup -c rollup.config.ts" }, ... }
6.编写demo代码
// sum.ts export default function sum(a: number, b:number){ return a+b; } // index.ts import sum from './sum'; console.log(sum(1, 2)); export default { sum }
7.测试运行
pnpm run dev pnpm run build
查看生成dist/index.js 和 dist/index.esm.js。
完整项目源码地址:demo-rollup
