手把手掌握搭建 TS+Rollup 初始开发环境的方法

在当今的前端开发领域，TypeScript（TS）和 Rollup 已经成为许多开发者的首选工具。TS 为我们带来了更强大的类型系统和更好的代码可读性，而 Rollup 则是一款出色的模块打包工具。接下来，让我们一步步掌握搭建 TS + Rollup 初始开发环境的方法。

确保您的系统中已经安装了 Node.js 和 npm（或 yarn）。您可以从 Node.js 官方网站获取最新的稳定版本进行安装。

接下来，创建一个新的项目文件夹，并在终端或命令提示符中进入该文件夹。

使用以下命令初始化一个新的 npm 项目：

npm init -y

或者，如果您使用 yarn：

yarn init -y

然后，安装 TypeScript：

npm install typescript --save-dev

或

yarn add typescript --dev

安装完成后，通过以下命令初始化 TypeScript 配置：

npx tsc --init

这将在项目根目录创建一个 tsconfig.json 文件，您可以根据项目需求对其中的配置进行修改。

接下来，安装 Rollup：

npm install rollup --save-dev

或

yarn add rollup --dev

为了能够处理 TypeScript 和其他常见的模块格式，我们还需要安装一些必要的插件。例如：

npm install @rollup/plugin-typescript --save-dev

或

yarn add @rollup/plugin-typescript --dev

创建一个 rollup.config.js 文件来配置 Rollup。以下是一个简单的示例配置：

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

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

在上述配置中，指定了输入文件为 src/main.ts，输出文件为 dist/bundle.js，输出格式为 umd，并使用了 TypeScript 插件进行处理。

现在，您可以在 src 文件夹中创建您的 TypeScript 代码文件，并在终端中运行 rollup -c 来进行打包。

通过以上步骤，您已经成功搭建了 TS + Rollup 的初始开发环境，可以开始愉快地进行前端开发啦！不断实践和探索，您将能够充分发挥它们的优势，提升开发效率和代码质量。