踏踏实实，0 基础亲手构建 TypeScript + Rollup 开发环境

2023-09-28 18:17:26

导言

在当今繁杂的软件开发生态系统中，无数强大的 CLI 工具粉墨登场，让开发者的工作看似轻而易举。然而，抛开这些便利工具，尝试从头开始手动构建一个简约高效的 NPM 包开发环境，不失为一种宝贵且充实的实践。本文将带领大家一步步踏上构建 TypeScript + Rollup 开发环境的探索之旅。

TypeScript 是一种超集 JavaScript 的编程语言，它添加了类型检查功能，大大提高了 JavaScript 代码的可靠性。而 Rollup 则是一个 JavaScript 模块打包工具，可以将多个模块打包成单个文件。将 TypeScript 和 Rollup 搭配使用，我们能够构建出可读性强、维护性佳的 JavaScript 代码。

搭建 TypeScript + Rollup 开发环境，主要包括以下步骤：

安装 Node.js 和 npm：
确保已安装最新版本的 Node.js 和 npm。
初始化 NPM 项目：
创建一个新的目录，并在其中运行 npm init -y 初始化一个 NPM 项目。
安装 TypeScript：
运行 npm install typescript --save-dev 安装 TypeScript。

创建 tsconfig.json 文件：
在项目根目录下创建 tsconfig.json 文件，并添加以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

安装 Rollup：
运行 npm install rollup --save-dev 安装 Rollup。

创建 Rollup 配置文件：
在项目根目录下创建 rollup.config.js 文件，并添加以下配置：

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [
    typescript()
  ]
};

编写 TypeScript 代码：
在 src 目录下创建 index.ts 文件，并编写以下代码：
```
export function helloWorld() {
  console.log('Hello, world!');
}
```
构建项目：
运行 npx rollup -c 构建项目。
测试项目：
在 dist 目录下，运行 node index.js 测试项目。