如何将多个TypeScript文件打包为前端单文件JavaScript库？

嘿，我完全懂你的痛点——要把一堆TS文件打包成浏览器能直接跑的单文件库，模块语法不好使，script type="module"又满足不了加载速度要求。别慌，咱们直接用**IIFE（立即执行函数表达式）**格式打包就行，这是浏览器原生支持的，不需要任何模块加载器，而且打包后是单个紧凑文件，加载速度拉满。

下面给你两种最常用的工具方案，选你顺手的来：

方案一：用Rollup打包（轻量，适合库开发） #

Rollup对库打包的支持特别友好，配置简单，打包出来的代码也更精简。

1. 初始化项目并安装依赖
   先在项目根目录跑这些命令：

   npm init -y
   npm install rollup rollup-plugin-typescript2 typescript --save-dev
   

2. 配置Rollup
   创建rollup.config.js文件，内容如下：

   import typescript from 'rollup-plugin-typescript2';
   
   export default {
     input: './src/index.ts', // 你的TS入口文件
     output: {
       file: './dist/your-library.js', // 输出的单文件JS
       format: 'iife', // 关键：用IIFE格式
       name: 'YourLibrary', // 全局变量名，浏览器里通过这个访问你的库
       sourcemap: true // 可选，方便调试TS源码
     },
     plugins: [
       typescript({
         tsconfig: './tsconfig.json' // 关联你的TS配置
       })
     ]
   };
   

3. 配置TypeScript
   创建tsconfig.json，基础配置参考：

   {
     "compilerOptions": {
       "target": "ES5", // 兼容更多浏览器
       "module": "ESNext", // Rollup能很好处理ES模块
       "strict": true,
       "declaration": true, // 可选，生成.d.ts类型文件
       "outDir": "./dist"
     },
     "include": ["src/**/*"]
   }
   

4. 打包并使用
   在package.json里加个脚本：

   "scripts": {
     "build": "rollup -c"
   }
   

   跑npm run build就能得到打包好的文件了！在浏览器里直接用普通<script>标签引入：

   <script src="./dist/your-library.js"></script>
   <script>
     // 直接用全局变量YourLibrary调用你的方法
     YourLibrary.yourFunction();
   </script>
   

方案二：用Webpack打包（功能全，适合复杂项目） #

如果你的项目依赖多、逻辑复杂，Webpack也是个好选择。

1. 安装依赖

   npm init -y
   npm install webpack webpack-cli ts-loader typescript --save-dev
   

2. 配置Webpack
   创建webpack.config.js：

   const path = require('path');
   
   module.exports = {
     entry: './src/index.ts',
     mode: 'production', // 生产模式会压缩代码，加载更快
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node_modules/
         }
       ]
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js']
     },
     output: {
       filename: 'your-library.js',
       path: path.resolve(__dirname, 'dist'),
       library: 'YourLibrary', // 全局变量名
       libraryTarget: 'window' // 把库挂载到window对象上
     },
     devtool: 'source-map' // 可选，调试用
   };
   

3. TS配置和打包
   TS配置和Rollup方案的tsconfig.json差不多，然后在package.json加脚本：

   "scripts": {
     "build": "webpack"
   }
   

   跑npm run build后，同样用普通<script>标签引入就能用了。

关键注意点 #

• 如果你要把某些方法/类暴露给全局，记得在TS入口文件里用export导出，打包工具会自动把它们挂载到你指定的全局变量上。
• 生产模式下打包会自动压缩代码，体积更小，加载速度更快，一定要开！
• 要是需要兼容老浏览器，可以加个Babel插件（比如Rollup的@rollup/plugin-babel或者Webpack的babel-loader）转译到更低版本的JS。

内容的提问来源于stack exchange，提问作者Jonathan Wilbur