开发环境配置

在学习TS前，我们首先需要配置TS开发环境。

全局安装 Typescript 对 TypeScript 进行编译

npm install typescript -g

查看TS版本号

tsc -v

初始化ts配置文件

tsc --init # 生成tsconfig.json

vscode 中新建一个工程，然后在这个工程中新建一个 .ts 文件，如 1.ts，并输入如下代码

const a = 1

在终端执行

tsc 1.ts

可以将ts文件编译成js文件，可以看到与1.ts的同级目录下生成了一个同名的1.js文件，内容为

var a = 1

这样 .ts 文件就成功编译成了 .js 文件。

但是当我们每次修改 .ts 文件后都要手动执行tsc x.ts命令才能得到最新的编译后的 .js 文件，这样操作起来比较麻烦。

我们可以在终端执行

tsc --watch 1.ts

来监控到ts文件变化自动生成js文件。

如果我们只是想简单的看下 .ts 文件的运行结果，并不想生成对应的 .js 文件，这时在vscode中我们可以右键单击选择 run code 来运行 ts 文件，使用 run code 运行 .ts 文件需要先全局安装 ts-node。

npm install ts-node -g

配置 rollup 环境

上面的方式只能让我们将 TS 编译成 JS ，但是无法让我们查看编译后的文件在浏览器端运行的结果。下面我们通过配置 rollup ，来实现这样的效果。

初始化配置文件 tsconfig.json
```
tsc --init
```
将配置文件中的 "module" 选项改为 "ESNext"：
```
{
 "module": "ESNext" 
}
```

安装依赖：

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

新建 src/index.ts文件并输入测试内容，如：
```
const a = 1;
console.log(a);
```

新建 public/index.html文件，并输入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>

在项目根目录创建 rollup.config.js 文件，并将以下内容复制到文件中：

import ts from 'rollup-plugin-typescript2' // 解析ts的插件
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(__dirname, 'dist/bundle.js'),
    sourcemap: true // 根据源码产生映射文件
  },
  plugins: [
    nodeResolve({ // 第三方文件解析
      extensions: ['.js', '.ts']
    }),
    ts({
      // 指定插件的配置文件
      tsconfig: path.resolve(__dirname, 'tsconfig.json')
    }),
    serve({
      openPage: '/public/index.html',
      contentBase: '',
      port: 3000
    })
  ]
}

package.json 文件配置

"scripts": {
  "dev": "rollup -c -w"
}

我们可以通过 npm run dev 启动服务，运行完命令后我们可以在 dist 文件夹下看到编译后的 bundle.js文件，内容如下： ```javascript (function () { ‘use strict’;

var a = 1; console.log(a);

})(); //# sourceMappingURL=bundle.js.map `` 后续我们再修改index.ts` 文件后，都会及时自动打包编译文件。

2. 配置开发环境

开发环境配置

配置 rollup 环境