如何在Rollup+TypeScript项目中打包jQuery等依赖？

嘿，这个问题我之前也踩过坑！核心原因其实有两个：一是你只装了类型定义@types/jquery，没装实际的jQuery库；二是Rollup默认不处理CommonJS格式的模块，而jQuery正好是用这种格式导出的。下面一步步给你搞定：

第一步：安装实际的jQuery库 #

@types/jquery只是给TypeScript提供类型提示的“壳子”，不是真正的jQuery运行代码。先把本体装上：

npm install jquery --save
# 用yarn的话就跑这个
yarn add jquery

第二步：安装Rollup的CommonJS转换插件 #

Rollup天生更适配ES模块，处理CommonJS格式的模块得靠rollup-plugin-commonjs帮忙。先装这个开发依赖：

npm install rollup-plugin-commonjs --save-dev
# yarn版本
yarn add rollup-plugin-commonjs --dev

第三步：修改Rollup配置文件 #

把commonjs插件加入你的配置，还要明确指定jQuery的导出项，让Rollup能正确识别它。修改后的配置大概是这样：

import * as fs from 'fs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: 'src/index.ts', // 替换成你项目的实际入口文件路径
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'iife', // 适合浏览器环境的打包格式，会自动把代码包裹在立即执行函数里，避免全局污染
    name: 'MyProject' // 可选：如果需要在全局访问你的项目代码，可以设置这个名称
  },
  plugins: [
    resolve(), // 帮Rollup找到node_modules里的模块
    commonjs({
      include: 'node_modules/**', // 处理所有node_modules里的CommonJS模块
      namedExports: {
        // 明确指定jQuery的导出项，因为它默认是通过module.exports导出的，Rollup需要额外识别
        'node_modules/jquery/dist/jquery.js': ['$', 'jQuery']
      }
    }),
    typescript() // 处理TypeScript代码
  ]
};

第四步：在TypeScript中正常使用jQuery #

现在你可以在TS文件里放心引入并使用了：

import * as $ from 'jquery';

$(document).ready(() => {
  console.log('终于能正常用jQuery啦！');
});

这样重新打包后，jQuery就会被一起打包到你的bundle文件里，运行时再也不会出现$ is not defined的错误了～

内容的提问来源于stack exchange，提问作者K. Kowalczyk