如何将Node.js的require模块打包为单个文件？支持TypeScript

1. 安装依赖 #

安装Webpack核心工具、CLI，以及TypeScript相关处理插件：

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

2. 创建配置文件 #

在项目根目录新建webpack.config.js：

const path = require('path');

module.exports = {
  entry: './main.js', // 若使用TypeScript，替换为main.ts
  output: {
    filename: 'dist.js',
    path: path.resolve(__dirname, './'),
    libraryTarget: 'var', // 保证打包后代码可在全局环境运行，匹配示例输出结构
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        exclude: /node_modules/,
        loader: 'ts-loader', // 同时兼容JS和TS文件的编译处理
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'], // 自动解析指定后缀的文件
  },
  mode: 'none', // 禁用默认优化，保留清晰的代码结构
};

同时新建tsconfig.json配置TypeScript编译规则：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

3. 执行打包 #

在package.json的scripts中添加打包命令：

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

运行命令完成打包：

npm run build

Rollup #

专注于Tree Shaking的打包工具，能自动剔除未使用的代码（如示例中file2的myfunctionfunctionhere会被移除），适合库类项目。

使用步骤： #

1. 安装依赖：

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

2. 新建rollup.config.js：

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

export default {
  input: './main.js', // 替换为main.ts以支持TypeScript
  output: {
    file: 'dist.js',
    format: 'iife', // 生成自执行函数，匹配示例代码结构
  },
  plugins: [resolve(), commonjs(), typescript()],
};

3. 添加打包脚本并执行：

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

npm run build

Parcel #

零配置打包工具，无需手动编写配置文件，适合快速实现需求。

使用步骤： #

1. 安装依赖：

npm install parcel-bundler typescript --save-dev

2. 添加打包脚本：

"scripts": {
  "build": "parcel build main.js --no-minify"
}

3. 执行npm run build，Parcel会自动处理模块依赖与TypeScript编译。

Browserify #

老牌CommonJS模块打包工具，专门用于将Node.js模块转为浏览器可运行代码。

使用步骤： #

1. 安装依赖：

npm install browserify tsify --save-dev

2. 添加打包脚本：

"scripts": {
  "build": "browserify main.js -p [ tsify ] -o dist.js"
}

3. 执行npm run build完成打包。

esbuild #

基于Go开发的极速打包工具，编译速度远超传统JS打包工具，原生支持TypeScript。

使用步骤： #

1. 安装依赖：

npm install esbuild --save-dev

2. 添加打包脚本：

"scripts": {
  "build": "esbuild main.js --bundle --outfile=dist.js --format=iife --minify=false"
}

3. 执行npm run build即可快速生成目标文件。

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