将 .js 文件作为文本导入并在 react-native expo 中的 WebView 中使用

Question

我有一个文件 content.js，其中包含一些我想使用 injectedJavaScript 注入到 WebView 中的 JavaScript 代码。

我试过了：

    fetch('./content.js').then((result) => {
      result = result.text();
      this.setState(previousState => (
        {contentScript: result}
      ));
    });

但它没有得到正确的文件。

const contentScript = require('./content.js');

这行得通，但它会立即对 JavaScript 进行评估，我似乎找不到在执行之前将其转换为字符串的方法。

一种解决方案是将content.js 的代码复制到一个字符串中，但是当我想编辑代码时这会很烦人...

有没有人知道更好的解决方案？
近一个星期我仍然没有解决这个问题。 :(

Answer 1

由于 expo 使用webpack，您可以自定义它。 Webpack 有一个您可能感兴趣的loaders 部分。您需要的加载程序称为raw-loader。所以当你需要一些文件时，webpack 会针对它在配置中的加载器链运行这个文件。默认情况下，所有.js 文件都捆绑到index.js 中，当您运行您的应用程序时会执行这些文件。相反，您需要 raw-loader 的确切内容。它会插入类似的东西

module.contentScript = function() { return "console.log('Hello world!')"}

代替：

module.contentScript = function() { console.log('Hello World'}}

所以你需要：

npm install raw-loader --save-dev

在您的代码中：

require('raw-loader!./content.js');