将.js文件作为文本导入并在react-native博览会中的WebView InjectionJavaScript内部使用

Question

I have a file content.js that includes some JavaScript code that I want to inject inside a WebView using injectedJavaScript .

I tried:

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

But it doesn't get the right file.

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

This works, but it evals the JavaScript straight away and I can't seem to find a way to convert it to string before it gets executed.

A solution is to just make copy the code of content.js into a string, but that would be pretty annoying when I want to edit the code...

Does anyone know a better solution for this?
I still have no solution to this for almost a week. :(

Answer 1

Since expo is using webpack you can customize it. Webpack has a loaders section you might be interested in. And the loader you need is called raw-loader . So when you require some file, webpack runs this file against the chain of loaders it has in config. And by default all .js files are bundled into index.js that gets executed when you run your app. Instead you need the content of the file that raw-loader exactly does. It will insert something like

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

instead of:

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

So you need:

npm install raw-loader --save-dev

and inside your code:

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