如何使用 webpack 以在 React Native 环境中可执行的方式捆绑 javascript 代码

Question

我对 webpack 还很陌生，我想知道是否可以进行一个非常简单的实验。我想捆绑以下打字稿代码：

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 函数。

有谁知道如何更改我的 webpack 配置，以便我在调用 eval 后返回这样的对象？我认为这将是一个 IIFE，并将其作为它的回报。

我尝试过使用库目标 umd，但这似乎会引发错误，并且不会返回我在 React Native 中需要的对象。

Answer 1

要实现此目标，您需要调整 Webpack 配置，以适合您需求的格式输出库。

以下是如何修改 webpack.config.js 以输出将导出的对象分配给变量的 IIFE：

const path = require("path");

module.exports = {
  entry: "./test/index.ts",
  mode: "production",
  resolve: {
    extensions: [".ts"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    library: "myLib", // This will expose your library on a variable named myLib
    libraryTarget: "var", // This will output a var myLib = ... IIFE
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

确保您的项目中安装了 ts-loader 和 typescript，因为它们是 Webpack 处理 TypeScript 文件所必需的。