体验Rollup打造React+TypeScript生态，畅享开发者盛宴

2023-11-05 14:54:22

在众多打包工具中，Webpack 在公司项目中是使用范围最广的了，但是像 Vue、React、Vite 等类库都是使用 Rollup 作为打包工具的。Rollup 在打包 JavaScript 库的能力上具有非常突出的优点，相比 Webpack 而言，Rollup 能够以更有效的方式进行模块打包。

Rollup 简介

Rollup 是一款 JavaScript 模块打包器，它将模块以 AMD、CJS、ES 和 UMD 的方式打包成一个文件。Rollup 可以用于打包 Node.js 应用、浏览器应用和库。Rollup 在使用上十分灵活，它可以与许多其他工具和库集成，例如 Babel、TypeScript 和 Sass。

为什么要选择 Rollup？

相比于其他打包工具，Rollup 具有以下优点：

速度快： Rollup 使用并行算法来打包模块，因此速度非常快。
体积小： Rollup 打包的代码体积很小，这使得它非常适合打包库和小型应用程序。
可扩展性强： Rollup 可以与许多其他工具和库集成，这使得它非常灵活，可以满足不同的开发需求。
代码可读性好： Rollup 打包的代码非常容易阅读，这使得调试和维护代码变得更加容易。

使用 Rollup 搭建 React + TypeScript 脚手架

下面我们将使用 Rollup 搭建一个 React + TypeScript 脚手架。首先，我们需要安装 Rollup 和其他必要的依赖项。

npm install --save-dev rollup rollup-plugin-typescript rollup-plugin-commonjs rollup-plugin-node-resolve

安装完成后，我们就可以创建脚手架了。首先，创建一个 package.json 文件，内容如下：

{
  "name": "my-react-typescript-app",
  "version": "1.0.0",
  "description": "A React + TypeScript application",
  "main": "index.js",
  "scripts": {
    "start": "rollup -c",
    "build": "rollup -c --environment production"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.9.4"
  },
  "devDependencies": {
    "rollup": "^3.0.0",
    "rollup-plugin-typescript": "^3.0.0",
    "rollup-plugin-commonjs": "^15.1.0",
    "rollup-plugin-node-resolve": "^14.2.0"
  }
}

接下来，创建一个 rollup.config.js 文件，内容如下：

import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.tsx',
  output: {
    file: 'dist/index.js',
    format: 'umd',
    name: 'my-react-typescript-app'
  },
  plugins: [
    typescript(),
    commonjs(),
    resolve()
  ]
};

最后，创建一个 src/index.tsx 文件，内容如下：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, world!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));