如何在 JavaScript 模块包中内联包含字符串化的依赖项？

2022-2-22 9:40:50
收藏：0
阅读：1475
评论：1

我有一个 TypeScript 模块，它使用外部的 .lua 文件中的 Lua 代码来执行适配器魔法。我将这个 Lua 代码字符串化后包含在 JavaScript 中，然后使用 'lua-in-js' 包来执行它。我使用 'fs' 模块来读取文件，然后像下面这样将结果字符串化。（请参阅下面的 module.ts。）

const luaCode = fs.readFileSync('./adapter.lua').toString()

然而，挑战在于这个 TypeScript 模块被用在 React Native 中，其中不支持 'fs' 包。我使用 'tsc' 来编译模块包，在编译后的代码中，'fs' 模块被包含并作为依赖项使用。 (请参阅下面的 bundle.js。)

const fs_1 = require("fs");

const luaCode = (0, fs_1.readFileSync)('./adapter.lua').toString();

当尝试运行代码时，它会崩溃，因为 RN 不支持 'fs'。因此，Lua 代码必须被完全包含在包文件中，放在字符串变量 luaCode 中。我该如何实现这个？下面也是我用作参考的 tsconfig.json。

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "declaration": true,
    "outDir": "lib",
    "strict": true,
    "removeComments": true,
    "skipLibCheck": true,
    "isolatedModules": true
  },
    "include": [
    "src/**/*"
  ]
}
点赞
用户3451985
用户3451985

最终我自己找到了解决办法。我改变了构建过程，使用了 Babel，仅让 'tsc' 生成类型声明。(请参见下面的 package.json 中的构建脚本。)

"build": "babel src --out-dir lib --extensions .ts && tsc",

我安装了 Babel 插件“babel-plugin-inline-import”和“babel-plugin-module-resolver”，其中前者导致了我想要的结果。编译时我使用了预设的“@babel/preset-typescript”。(请参见下面的 babel.config.js。)

module.exports = {
    presets: ['@babel/preset-typescript'],
    plugins: [
        [
            'babel-plugin-inline-import',
            {
                extensions: ['.lua']
            }
        ]
    ],
    env: {
        test: {
            plugins: ['@babel/plugin-transform-modules-commonjs']
        }
    }
};

下面是我更新后的 tsconfig.json 供参考。

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "declaration": true,
    "outDir": "lib",
    "strict": true,
    "removeComments": true,
    "skipLibCheck": true,
    "emitDeclarationOnly": true,
    "isolatedModules": true,
    "moduleResolution": "node",
  },
    "include": [
    "src/**/*"
  ]
}

配置完成后，我可以在 TypeScript 模块中简单地导入 Lua 文件并在 'lua-in-js' 中使用它。

import luaAdapter from './adapter.lua';
2022-02-22 12:57:28

作者:

用户3451985

用户3451985
推荐文章