如何配置Webpack打包TypeScript代码，使其可在React Native中通过Eval执行？

问题场景 #

我是Webpack新手，想打包一段TypeScript代码：

const myFunc = () => {
    return {
        a: () => {
            console.log("hello from a");
        },
        b: () => {
            console.log("hello from b");
        },
    };
};

export default myFunc;

当前用的Webpack配置：

const path = require("path");
module.exports = { 
    entry: "./test/index.ts", 
    mode: "production", 
    resolve: { 
        extensions: [".ts"], 
    }, 
    output: { 
        filename: "bundle.js", 
        path: path.resolve(__dirname, "./build"), 
    }, 
}; 

执行webpack --config webpack.config.js后得到空的bundle.js。我需要生成带压缩的IIFE，直接返回如下对象结构：

{
    a: () => { 
        console.log("hello from a")
    },
    b: () => {
        console.log("hello from b")
    }
}

方便后续在React Native里用eval调用它的a、b方法。之前试了UMD库目标，不仅报错还没得到想要的对象，该怎么改配置？

解决步骤 #

1. 补全TypeScript编译依赖 #

Webpack本身不处理TypeScript，必须安装编译工具：

npm install --save-dev typescript ts-loader

同时在项目根目录新建tsconfig.json，基础配置如下：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

2. 修改Webpack配置 #

空bundle是因为生产模式的tree shaking把没被调用的myFunc优化掉了，同时需要明确配置输出为IIFE格式，让导出内容被保留并直接返回：

修改后的webpack.config.js：

const path = require("path");
module.exports = { 
    entry: "./test/index.ts", 
    mode: "production", 
    resolve: { 
        extensions: [".ts", ".js"], 
    },
    // 添加TS编译规则
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    output: { 
        filename: "bundle.js", 
        path: path.resolve(__dirname, "./build"),
        // 指定输出为IIFE格式
        library: {
            type: "iife"
        },
        // 导出默认导出项
        libraryExport: "default",
        // 确保IIFE在全局环境正常执行
        globalObject: "this"
    },
    optimization: {
        // 关闭usedExports避免tree shaking移除未被调用的导出
        usedExports: false
    }
}; 

3. 可选：调整TS代码简化输出 #

如果希望IIFE直接返回目标对象，不用额外调用函数，可以直接修改TS代码：

export default {
    a: () => {
        console.log("hello from a");
    },
    b: () => {
        console.log("hello from b");
    },
};

这样打包后的IIFE会直接返回你需要的对象，eval后就能直接调用a()或b()。

关于UMD的问题 #

UMD格式需要指定全局变量名（比如library: {name: "MyLib", type: "umd"}），没指定的话会报错。但你的需求是用eval调用，IIFE更合适——它会直接返回值，eval执行后就能拿到目标对象，不需要挂载全局变量。

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