TS——环境配置和搭建

一.Typescript 的价值是什么

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

• Typescript 更像后端 JAVA,让JS可以开发大型企业应用
• TS 提供的类型系统可以帮助我们在写代码时提供丰富的语法提示
• 在编写代码时会对代码进行类型检查从而避免很多线上错误

TypeScript不会取代JS, 尤雨溪： 我认为将类型添加到JS本身是一个漫长的过程 。让委员会设计一个类型系统是（根据TC39的经历来判断）不切实际的 。

二.环境配置

1.全局编译 TS 文件

全局安装typescript对TS进行编译

npm install typescript -g
tsc --init # 生成tsconfig.json

tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

如何运行

1. 最终直接生成 js 文件在运行。

2. vscode 插件来实现代码的运行(临时测试)

# code-runner 如果是js文件 内部会直接采用 node + 文件名来执行此文件 ,如果是ts文件 需要通过ts-node 来直接执行
npm install ts-node -g

3. 通过构建工具将代码转化成 js 在去运行 （webpack,rollup,esbuild） 最终便衣成 js 执行

2.配置rollup环境

• 安装依赖

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

  • rollup-plugin-typescript2: 这是 Rollup 中最常用的 TypeScript 插件,可以将 TypeScript 代码编译为 JavaScript 代码,并允许 Rollup 处理和打包。
  • @rollup/plugin-node-resolve: 这个插件可以让 Rollup 解析 Node.js 方式的模块导入,这样 Rollup 可以正确处理像 import/export 这样的语法。
  • rollup-plugin-serve: 这个插件可以启动一个服务器,并实时重新加载和更新当源代码变化时的页面。非常适合在开发过程中使用。
  • TypeScript: TypeScript 是一个 JavaScript 的超集语言,增加了类型系统,可以在编译为 JavaScript 前对代码进行检查。
  • Rollup: Rollup 是一个模块打包器,可以将小块代码编译成一个大块复杂的代码,常用于打包 JavaScript 库。

• 初始化TS配置文件

  npx tsc --init

• rollup.config.js配置操作

// 默认rollup 打包的时候会查找当前目录下 rollup.config.js这个文件
// 采用es模块来编写配置文件

// node中有模块规范默认是 commonjs , 也可以改成esm模块规范

import ts from "rollup-plugin-typescript2"
import serve from "rollup-plugin-serve"
import { nodeResolve } from "@rollup/plugin-node-resolve"
import path from "path"
import { fileURLToPath } from "url" //转换url为path

// import.meta.url 当前文件的绝对路径 file://xxxx/xxx/xxx
const __filename = fileURLToPath(import.meta.url) // 当前文件的绝对路径
const __dirname = path.dirname(__filename) // 当前文件所在的文件夹目录 绝对路径

// 打包的配置对象
export default {
  input: "./src/index.ts", // 项目入口
  output: {
    file: path.resolve(__dirname, "dist/bundle.js"), // 当前的文件在当前目录下的dist目录
    format: "iife", // 打包后的格式 iife 自执行  (function(){})()
    sourcemap: true,
  },
  plugins: [
    nodeResolve({
      extensions: [".js", ".ts"], // （第三方包的入口）入口文件可以是js 也可以是ts
    }),
    ts({
      tsconfig: path.resolve(__dirname, "tsconfig.json"), //所需要结合的ts
    }),
    serve({
      open: true,
      openPage: "/public/index.html",
      port: 3000,
      contentBase: "",
    }),
  ],
}

• package.json配置

{
  "name": "my-ts",
  "version": "1.0.0",
  "main": "test.js",
  "type": "module",
  "scripts": {
    "dev": "rollup -c -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^15.1.0",
    "rollup": "^3.27.2",
    "rollup-plugin-serve": "^2.0.2",
    "rollup-plugin-typescript2": "^0.35.0",
    "typescript": "^5.1.6"
  }
}

• tsconfig.json配置修改

{
  "compilerOptions": {
    //...
    "sourceMap": true, //开启sourceMap
    "module": "ESNext" // 指定生成的模块代码
    //....
  }
}