如何在我的 React Native 应用程序中创建脚本

Posted 2023-03-13

【中文标题】如何在我的 React Native 应用程序中创建脚本

【英文标题】：How to create a script within my React Native app

【发布时间】：2021-06-04 16:18:47

【问题描述】：

我有一个 React Native 应用程序。作为发布过程的一部分，我需要运行一个脚本，该脚本使用我的应用程序中的一些代码来生成一个静态文件。具体来说，我的应用程序是一个使用预先计算的棋盘的游戏，计算成本很高，所以我正在构建一个脚本来在发布阶段生成棋盘并将它们存储在本地文件中。我想在与我的应用程序相同的代码库中创建一个脚本，该脚本将导入代码库的其他部分以生成板。例如，我的工作树的一个子集是：

-lib
 \-Helper.tsx
  -Solver.tsx
-scripts
 \-GenerateBoards.js
  -generated_boards.out
App.tsx
package.json
tsconfig.json

Helper.tsx 和 Solver.tsx 是没有导入的独立文件。 GenerateBoards.js需要导入这两个文件，使用自己的内部逻辑生成板子，写到generated_boards.out。

我有一个版本的GenerateBoards.js 可以写入文件，例如：

fs = require('fs');
function main() 
  fs.writeFile(
    './scripts/generated_boards.out',
    'Hello, World!',
    function (err) 
      if (err) return console.log(err);
      console.log("Finished writing file.");
    );

main();

我可以使用node scripts\GenerateBoards.js 创建文件。下一步是导入Helper.tsx 或Solver.tsx，但我想不出任何咒语让它工作。我试过Helper = require("../lib/Helper.tsx")，但这给了我一些 MODULE_NOT_FOUND 错误。我尝试将GenerateBoards.js 转换为.tsx 文件并执行import * as Helper from "../lib/Helper"，但由于不允许从模块外部导入，所以会抱怨。

似乎有一些关于模块或定义模块的概念我不理解。 Typescript's module docs 声明“任何包含***导入或导出的文件都被视为一个模块”，所以似乎通过执行import * as ...，我正在创建一个模块。但是，编译器/转译器/运行器似乎声称相反。

【问题讨论】：

您想将什么确切的功能导入GenerateBoards，目的是什么？您尝试将 .tsx 文件导入节点似乎有点奇怪。

也许这会有所帮助blog.logrocket.com/how-to-use-ecmascript-modules-with-node-js

感谢您的链接。我尝试了.mjs，但运气不佳。坦率地说，我此时只是尝试使用 JS（尽管想使用 TS），因为我已经陷入了困境，让 TS 工作变得（看似）复杂。也就是说，我能够使用 Typescript 环境自行解决问题，我将添加它作为我自己问题的答案。再次感谢您抽出宝贵时间分享和帮助！

【参考方案1】：

我能够通过在我的 React Native 项目的子目录中正确设置一个模块来解决这个问题。

结构

-lib
 \-Helper.tsx
  -Solver.tsx
-scripts
 \-GenerateBoards.tsx
  -index.tsx*
  -package.json*
  -tsconfig.json*
  -generated_boards.out
App.tsx
package.json
tsconfig.json

index.tsx

import  GenerateBoards  from "./GenerateBoards";

async function main() 
  const generateBoards = new GenerateBoards();

  await generateBoards.generate();


main().then(() => console.log("Complete."));

package.json

  "module": "esnext"

tsconfig.json

  "compilerOptions": 
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "strict": true,
    "noImplicitAny": false,
    "target": "es2017"
  

现在，我的常规 Typescript 开发环境按预期工作； GenerateBoards.tsx 可以导入Helper.tsx 和Solver.tsx。要运行我的脚本和/或添加依赖项，我首先将cd 放入该文件夹，然后像任何其他 Typescript 环境一样运行命令，例如：

cd scripts
npm i some_package
npx ts-node index.tsx

这很好，因为它与我的“基础”package.json 完全隔离，后者包含我所有的应用程序依赖项，否则这些依赖项会被仅在我的脚本中需要的东西污染。